/* =====================================================================
   KPANDJI AUTOMOBILES — Registre des prospects
   Direction : tableau de bord de véhicule. Graphite, orange instrument,
   numéros en chiffres monospacés (le numéro est la clé du registre).
   ===================================================================== */

:root{
  --graphite:#171A21;
  --acier:#232833;
  --acier-clair:#333A48;
  --atelier:#F1F2F4;
  --blanc:#FFFFFF;
  --kpandji:#E8730C;
  --kpandji-sombre:#B85A08;
  --route:#0F7A4F;
  --alerte:#C0392B;
  --ambre:#D99100;
  --texte:#1B1F27;
  --texte-doux:#6B7280;
  --bord:#DDE0E5;

  --r:10px;
  --ombre:0 1px 2px rgba(23,26,33,.06), 0 8px 24px rgba(23,26,33,.06);
  --display:'Oswald',system-ui,sans-serif;
  --corps:'Montserrat',system-ui,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--corps);
  background:var(--atelier);
  color:var(--texte);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:.01em;margin:0}
a{color:var(--kpandji-sombre)}

/* ---------- Marque ---------- */
.marque__plaque{
  display:inline-block;
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  letter-spacing:.22em;
  color:var(--graphite);
  background:var(--kpandji);
  padding:4px 14px 3px;
  border-radius:4px;
  border:2px solid var(--graphite);
}
.marque__plaque--petit{font-size:13px;padding:2px 9px 1px;letter-spacing:.18em;border-width:1.5px}
.marque__titre{font-size:29px;margin:18px 0 4px;color:var(--blanc)}
.marque__sous{margin:0 0 26px;color:#9AA3B2;font-size:13.5px}

/* ---------- Connexion ---------- */
.connexion{
  min-height:100dvh;
  display:grid;place-items:center;
  padding:24px;
  background:
    radial-gradient(900px 480px at 50% -10%, #2A3140 0%, transparent 70%),
    var(--graphite);
}
.connexion__panneau{width:100%;max-width:390px}
.connexion__note{color:#78808F;font-size:12px;margin-top:16px;text-align:center;line-height:1.5}
.connexion__bascule{text-align:center;margin:15px 0 0;font-size:13px;color:#9AA3B2}
.lien{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--corps);font-size:13px;font-weight:600;
  color:var(--kpandji);text-decoration:underline;text-underline-offset:3px;
}
.lien:hover{color:#F79340}
.lien:focus-visible{outline:2px solid var(--kpandji);outline-offset:3px;border-radius:3px}
.champ{margin-bottom:14px}
.champ label{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;color:#9AA3B2;margin-bottom:6px;
}
.connexion input{
  width:100%;padding:12px 14px;border-radius:var(--r);
  border:1px solid #3A4252;background:#1E222C;color:var(--blanc);
  font-family:var(--corps);font-size:15px;
}
.connexion input:focus{outline:2px solid var(--kpandji);outline-offset:1px;border-color:transparent}

/* ---------- Boutons ---------- */
.bouton{
  font-family:var(--corps);font-weight:600;font-size:14px;
  border-radius:var(--r);border:1px solid var(--bord);
  background:var(--blanc);color:var(--texte);
  padding:9px 16px;cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.bouton:hover{border-color:#B9BFC9}
.bouton:active{transform:translateY(1px)}
.bouton:focus-visible{outline:2px solid var(--kpandji);outline-offset:2px}
.bouton--plein{background:var(--kpandji);border-color:var(--kpandji);color:#fff}
.bouton--plein:hover{background:var(--kpandji-sombre);border-color:var(--kpandji-sombre)}
.bouton--sombre{background:var(--graphite);border-color:var(--graphite);color:#fff}
.bouton--sombre:hover{background:#2A303C}
.bouton--large{width:100%;padding:13px;font-size:15px}
.bouton--fantome{background:transparent;border-color:transparent;color:inherit}
.bouton--fantome:hover{background:rgba(255,255,255,.08);border-color:transparent}
.bouton--petit{padding:6px 11px;font-size:12.5px}
.bouton--vert{background:var(--route);border-color:var(--route);color:#fff}
.bouton[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 20px;background:var(--graphite);color:var(--blanc);
}
.entete__gauche{display:flex;align-items:center;gap:12px;min-width:0}
.entete__titre{font-family:var(--display);font-size:16px;letter-spacing:.02em;white-space:nowrap}
.entete__droite{display:flex;align-items:center;gap:10px}
.identite{text-align:right;line-height:1.25;min-width:0}
.identite strong{display:block;font-size:13px;font-weight:600}
.identite span{font-size:11px;color:#9AA3B2}

/* ---------- Onglets ---------- */
.onglets{
  position:sticky;top:53px;z-index:29;
  display:flex;gap:2px;overflow-x:auto;
  background:var(--acier);padding:0 12px;
  scrollbar-width:none;
}
.onglets::-webkit-scrollbar{display:none}
.onglet{
  flex:none;background:none;border:none;cursor:pointer;
  font-family:var(--corps);font-weight:600;font-size:13px;
  color:#9AA3B2;padding:12px 14px;
  border-bottom:3px solid transparent;
  white-space:nowrap;
}
.onglet:hover{color:#fff}
.onglet--actif{color:#fff;border-bottom-color:var(--kpandji)}
.onglet:focus-visible{outline:2px solid var(--kpandji);outline-offset:-4px}

/* ---------- Vue ---------- */
.vue{max-width:1120px;margin:0 auto;padding:22px 16px 60px}
.pied{text-align:center;color:var(--texte-doux);font-size:11.5px;padding:0 16px 26px}

.section{margin-bottom:28px}
.section__entete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.section__titre{font-size:19px}
.oeil{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--texte-doux);margin-bottom:5px}

.carte{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre)}
.carte__corps{padding:16px}

/* ---------- Compteurs ---------- */
.compteurs{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.compteur{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);padding:14px 16px}
.compteur__valeur{font-family:var(--display);font-size:30px;line-height:1.05;color:var(--graphite)}
.compteur__valeur--or{color:var(--kpandji)}
.compteur__valeur--vert{color:var(--route)}
.compteur__valeur--rouge{color:var(--alerte)}
.compteur__label{font-size:11.5px;color:var(--texte-doux);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:3px}
.compteur__note{font-size:11.5px;color:var(--texte-doux);margin-top:2px}

/* ---------- SIGNATURE : bandeau de contrôle du numéro ---------- */
.controle{
  border-radius:var(--r);
  background:var(--graphite);
  color:#fff;
  padding:13px 16px;
  display:flex;align-items:center;gap:13px;
  border-left:5px solid var(--acier-clair);
  transition:border-color .2s ease, background .2s ease;
}
.controle--libre{border-left-color:var(--route);background:#12251C}
.controle--occupe{border-left-color:var(--alerte);background:#2A1614}
.controle--attente{opacity:.75}
.controle__voyant{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--acier-clair);
}
.controle--libre  .controle__voyant{background:#27C281;box-shadow:0 0 0 4px rgba(39,194,129,.18)}
.controle--occupe .controle__voyant{background:#F0564A;box-shadow:0 0 0 4px rgba(240,86,74,.18)}
.controle__texte{font-size:13px;line-height:1.4}
.controle__texte strong{display:block;font-family:var(--display);font-size:14.5px;letter-spacing:.03em;text-transform:uppercase}
.controle__texte span{color:#A8B0BE}

/* ---------- Formulaire ---------- */
.grille-form{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grille-form .pleine{grid-column:1/-1}
.form label{
  display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;color:var(--texte-doux);margin-bottom:5px;
}
.form input,.form select,.form textarea{
  width:100%;padding:10px 12px;border:1px solid var(--bord);border-radius:8px;
  font-family:var(--corps);font-size:14.5px;background:var(--blanc);color:var(--texte);
}
.form textarea{min-height:78px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:2px solid var(--kpandji);outline-offset:0;border-color:transparent;
}
.form .mono{font-family:var(--mono);letter-spacing:.03em}

/* ---------- Tableau ---------- */
.tableau-boite{overflow-x:auto;background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--texte-doux);font-weight:700;
  padding:11px 13px;border-bottom:1px solid var(--bord);white-space:nowrap;background:#FAFBFC;
}
td{padding:11px 13px;border-bottom:1px solid #EFF1F4;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer}
tbody tr:hover{background:#FBF7F2}
.tel{font-family:var(--mono);font-size:13px;white-space:nowrap}
.nom-fort{font-weight:600}

/* ---------- Étiquettes de statut ---------- */
.etiq{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent;
}
.etiq--gris{background:#EDEFF2;color:#4B5563}
.etiq--bleu{background:#E5EEFB;color:#1D4E89}
.etiq--ambre{background:#FDF1DC;color:#8A5A00}
.etiq--orange{background:#FCE9D8;color:#9C4A05}
.etiq--vert{background:#DFF3E9;color:#0B5C3C}
.etiq--rouge{background:#FBE3E1;color:#8F2A20}
.etiq--dormant{background:var(--alerte);color:#fff}

/* ---------- Filtres ---------- */
.filtres{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.filtres input,.filtres select{
  padding:9px 12px;border:1px solid var(--bord);border-radius:8px;
  font-family:var(--corps);font-size:13.5px;background:var(--blanc);
}
.filtres input{flex:1;min-width:160px}

/* ---------- Entonnoir ---------- */
.entonnoir{display:grid;gap:8px}
.etape{display:grid;grid-template-columns:24px 152px 1fr 38px;align-items:center;gap:11px}
.etape__num{font-family:var(--mono);font-size:11px;color:var(--texte-doux)}
.etape__nom{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etape__barre{height:14px;background:#EDEFF2;border-radius:99px;overflow:hidden}
.etape__remplissage{height:100%;background:var(--graphite);border-radius:99px;transition:width .5s ease}
.etape__valeur{font-family:var(--display);font-size:17px;text-align:right}
@media (max-width:640px){ .etape{grid-template-columns:20px 110px 1fr 32px;gap:8px} }

/* ---------- Barres de comparaison ---------- */
.barres{display:grid;gap:10px}
.barre{display:grid;grid-template-columns:130px 1fr 62px;gap:11px;align-items:center;font-size:13px}
.barre__nom{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre__piste{height:9px;background:#EDEFF2;border-radius:99px;overflow:hidden}
.barre__jauge{height:100%;background:var(--kpandji);border-radius:99px;transition:width .5s ease}
.barre__val{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--texte-doux)}

/* ---------- Fiche prospect ---------- */
.fiche__tete{
  background:var(--graphite);color:#fff;border-radius:var(--r);
  padding:18px 20px;margin-bottom:16px;
}
.fiche__nom{font-size:24px;color:#fff}
.fiche__tel{font-family:var(--mono);font-size:15px;color:var(--kpandji);margin-top:3px}
.fiche__meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;font-size:12.5px;color:#A8B0BE}
.fiche__meta b{color:#fff;font-weight:600}

.paires{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.paire__cle{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--texte-doux);font-weight:700}
.paire__val{font-size:14px;font-weight:500}

/* ---------- Journal ---------- */
.journal{position:relative;padding-left:22px;margin-top:6px}
.journal::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--bord)}
.trace{position:relative;padding-bottom:16px}
.trace::before{
  content:"";position:absolute;left:-21px;top:5px;width:11px;height:11px;
  border-radius:50%;background:var(--blanc);border:2px solid var(--kpandji);
}
.trace:first-child::before{background:var(--kpandji)}
.trace__date{font-family:var(--mono);font-size:11.5px;color:var(--texte-doux)}
.trace__texte{font-size:13.5px;margin-top:2px}
.trace__auteur{font-size:11.5px;color:var(--texte-doux);margin-top:2px}

/* ---------- Divers ---------- */
.vide{text-align:center;padding:40px 20px;color:var(--texte-doux)}
.vide strong{display:block;font-family:var(--display);font-size:18px;color:var(--texte);margin-bottom:5px}
.erreur{color:#F0564A;font-size:13px;margin:0 0 12px}
.alerte-boite{
  background:#FFF6EC;border:1px solid #F3D6B4;border-left:4px solid var(--kpandji);
  border-radius:8px;padding:12px 14px;font-size:13.5px;margin-bottom:14px;
}
.rangee{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.mono{font-family:var(--mono)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--graphite);color:#fff;padding:12px 20px;border-radius:99px;
  font-size:13.5px;font-weight:600;z-index:80;box-shadow:0 8px 28px rgba(0,0,0,.28);
  max-width:calc(100vw - 32px);text-align:center;
}
.toast--erreur{background:var(--alerte)}
.toast--succes{background:var(--route)}

/* ---------- Modale ---------- */
.modale{position:fixed;inset:0;background:rgba(15,18,24,.62);z-index:70;display:grid;place-items:center;padding:16px}
.modale__boite{background:var(--blanc);border-radius:14px;width:100%;max-width:560px;max-height:88dvh;display:flex;flex-direction:column}
.modale__entete{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--bord)}
.modale__entete h2{font-size:18px}
.modale__corps{padding:18px;overflow-y:auto}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .entete{padding:10px 13px}
  .entete__titre{display:none}
  .identite strong{font-size:12px}
  .onglets{top:48px}
  .vue{padding:16px 12px 50px}
  .compteur__valeur{font-size:25px}
  .barre{grid-template-columns:104px 1fr 52px}
  th,td{padding:9px 10px}
  .fiche__nom{font-size:20px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}