/* ==========================================================================
   CRM QuanticAI — design system (zéro dépendance, aucune ressource externe)
   ========================================================================== */

:root {
  --navy: #0b1f2e;
  --navy-2: #10293c;
  --navy-3: #16344c;
  --teal: #14c9b4;
  --teal-fonce: #0d9486;
  --teal-pale: #e0f8f4;
  --fond: #f3f6f9;
  --surface: #ffffff;
  --texte: #17242f;
  --muet: #5f7385;
  --bord: #e2e9ef;
  --rouge: #c2382c;
  --rouge-pale: #fdecea;
  --vert: #178a5b;
  --vert-pale: #e3f5ec;
  --ambre: #a06e00;
  --ambre-pale: #fdf3d9;
  --ombre: 0 1px 2px rgba(11, 31, 46, .06), 0 4px 14px rgba(11, 31, 46, .06);
  --ombre-haute: 0 6px 28px rgba(11, 31, 46, .18);
  --rayon: 12px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.5 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--fond);
  color: var(--texte);
}
a { color: var(--teal-fonce); text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 14px; }

#app { display: flex; min-height: 100vh; }

/* --- Barre latérale ----------------------------------------------------- */
.lateral {
  width: 224px; flex-shrink: 0;
  background: linear-gradient(175deg, var(--navy), var(--navy-2) 60%, var(--navy-3));
  color: #fff; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.logo {
  font-size: 21px; font-weight: 800; color: #fff; letter-spacing: .2px;
  padding: 22px 22px 26px; display: block;
}
.logo span { color: var(--teal); }
.logo small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 3px; color: rgba(255,255,255,.45); margin-top: 2px; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; flex: 1; }
.lateral nav a {
  display: flex; align-items: center; gap: 11px;
  color: rgba(255,255,255,.72); padding: 10px 12px; border-radius: 9px;
  font-weight: 600; font-size: 13.5px; transition: background .15s, color .15s;
}
.lateral nav a svg { width: 17px; height: 17px; fill: currentColor; opacity: .85; }
.lateral nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.lateral nav a.actif { background: rgba(20,201,180,.16); color: #fff; }
.lateral nav a.actif svg { fill: var(--teal); opacity: 1; }
.pastille {
  background: var(--rouge); color: #fff; border-radius: 999px;
  font-size: 11px; padding: 1px 7px; margin-left: auto;
}
.lateral-pied { padding: 18px 22px; font-size: 11.5px; color: rgba(255,255,255,.55); }
.lateral-pied .discret { margin-top: 4px; color: rgba(255,255,255,.35); }

/* --- Barre du haut ------------------------------------------------------- */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barre {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 28px; background: var(--surface);
  border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 20;
}
.recherche { flex: 1; max-width: 520px; position: relative; }
.recherche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; fill: var(--muet); }
.recherche input {
  width: 100%; padding: 9px 12px 9px 38px;
  border: 1px solid var(--bord); border-radius: 10px; font: inherit;
  background: var(--fond); transition: border-color .15s, background .15s;
}
.recherche input:focus { outline: none; border-color: var(--teal); background: #fff; }
.vue { padding: 26px 28px 70px; animation: apparait .18s ease-out; }
@keyframes apparait { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.tete-vue { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.tete-vue .sous { color: var(--muet); font-size: 13.5px; }
.tete-vue .droite { margin-left: auto; display: flex; gap: 10px; }

/* --- Boutons ------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--teal); color: #05261f; font-weight: 700;
  border: none; border-radius: 10px; padding: 9px 16px;
  transition: filter .15s, transform .05s;
}
.bouton:hover { filter: brightness(1.07); }
.bouton:active { transform: translateY(1px); }
.bouton.secondaire { background: var(--surface); color: var(--texte); border: 1px solid var(--bord); font-weight: 600; }
.bouton.secondaire:hover { border-color: #c4d2dc; filter: none; background: #f8fbfc; }
.bouton.danger { background: var(--surface); color: var(--rouge); border: 1px solid #edc9c4; font-weight: 600; }
.bouton.petit { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.bouton.fantome { background: transparent; border: none; color: var(--teal-fonce); font-weight: 600; padding: 4px 8px; }
.bouton[disabled] { opacity: .55; cursor: default; }

/* --- Cartes KPI ----------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi {
  background: var(--surface); border-radius: var(--rayon); padding: 18px 20px;
  box-shadow: var(--ombre); border: 1px solid transparent;
}
.kpi.accent { background: linear-gradient(135deg, var(--navy), var(--navy-3)); color: #fff; }
.kpi .valeur { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.kpi.accent .valeur { color: var(--teal); }
.kpi .legende { font-size: 12px; color: var(--muet); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; margin-top: 2px; }
.kpi.accent .legende { color: rgba(255,255,255,.65); }
.kpi .detail { font-size: 12px; color: var(--muet); margin-top: 6px; }
.kpi.accent .detail { color: rgba(255,255,255,.55); }

/* --- Panneaux ------------------------------------------------------------- */
.panneau { background: var(--surface); border-radius: var(--rayon); padding: 20px 22px; box-shadow: var(--ombre); margin-bottom: 16px; }
.deux-colonnes { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .deux-colonnes { grid-template-columns: 1fr; } }

/* --- Répartition pipeline (barres) ---------------------------------------- */
.barres .ligne-barre { display: grid; grid-template-columns: 190px 1fr 34px; gap: 12px; align-items: center; padding: 5px 0; font-size: 13px; }
.barres .rail { background: var(--fond); border-radius: 999px; height: 10px; overflow: hidden; }
.barres .rempli { height: 100%; border-radius: 999px; background: var(--teal); min-width: 2px; transition: width .4s ease; }
.barres .nombre { text-align: right; color: var(--muet); font-weight: 600; }

/* --- Kanban ----------------------------------------------------------------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; padding-bottom: 14px; }
.colonne {
  background: #e9eff4; border-radius: var(--rayon);
  min-width: 248px; width: 248px; flex-shrink: 0; padding: 10px;
  transition: background .15s, outline .15s; outline: 2px dashed transparent; outline-offset: -2px;
}
.colonne.survolee { background: var(--teal-pale); outline-color: var(--teal); }
.colonne.perdu { background: #f2eae9; }
.colonne-tete { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; }
.colonne-tete .point { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.colonne-tete .titre { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muet); }
.colonne-tete .nb { margin-left: auto; background: var(--surface); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; }
.carte {
  background: var(--surface); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(11,31,46,.1); cursor: grab; display: block; color: var(--texte);
  border-left: 3px solid var(--teal); transition: box-shadow .15s, transform .15s;
}
.carte:hover { box-shadow: 0 4px 14px rgba(11,31,46,.16); transform: translateY(-1px); text-decoration: none; }
.carte.trainee { opacity: .4; }
.carte .nom { font-weight: 700; font-size: 13.5px; }
.carte .detail { color: var(--muet); font-size: 12px; margin-top: 2px; }
.carte .mag { color: var(--teal-fonce); font-weight: 700; font-size: 12.5px; margin-top: 5px; }
.colonne .vide-colonne { color: var(--muet); font-size: 12px; text-align: center; padding: 14px 4px; }

/* --- Tableaux ------------------------------------------------------------------ */
table.tableau { width: 100%; border-collapse: collapse; }
.tableau th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muet); padding: 8px 12px; border-bottom: 2px solid var(--bord); }
.tableau td { padding: 11px 12px; border-bottom: 1px solid var(--bord); font-size: 13.5px; vertical-align: middle; }
.tableau tr:last-child td { border-bottom: none; }
.tableau tbody tr { cursor: pointer; transition: background .1s; }
.tableau tbody tr:hover { background: #f4fbf9; }

/* --- Badges d'étape --------------------------------------------------------------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #e6edf2; color: var(--navy-3); white-space: nowrap; }
.badge[data-etape="nouveau"] { background: #e6edf2; color: #3d5468; }
.badge[data-etape="contacte"] { background: #dfeefb; color: #1f5d8f; }
.badge[data-etape="audit-planifie"] { background: #e8e4fa; color: #52439e; }
.badge[data-etape="diagnostic-realise"] { background: var(--teal-pale); color: var(--teal-fonce); }
.badge[data-etape="devis-envoye"] { background: var(--ambre-pale); color: var(--ambre); }
.badge[data-etape="signe"] { background: var(--vert-pale); color: var(--vert); }
.badge[data-etape="en-livraison"] { background: #def2f9; color: #14647e; }
.badge[data-etape="en-maintenance"] { background: #e4f2e9; color: #2c6e4a; }
.badge[data-etape="perdu"] { background: var(--rouge-pale); color: var(--rouge); }
.badge.neutre { background: var(--fond); color: var(--muet); }

.point[data-etape="nouveau"] { background: #7d93a6; }
.point[data-etape="contacte"] { background: #3d87c4; }
.point[data-etape="audit-planifie"] { background: #7a68cf; }
.point[data-etape="diagnostic-realise"] { background: var(--teal); }
.point[data-etape="devis-envoye"] { background: #d9a417; }
.point[data-etape="signe"] { background: #27ae6e; }
.point[data-etape="en-livraison"] { background: #2fa3c9; }
.point[data-etape="en-maintenance"] { background: #4d9b6d; }
.point[data-etape="perdu"] { background: #c2382c; }

/* --- Fiche prospect --------------------------------------------------------------- */
.heros {
  background: linear-gradient(130deg, var(--navy), var(--navy-3));
  color: #fff; border-radius: var(--rayon); padding: 24px 26px; margin-bottom: 16px;
  box-shadow: var(--ombre);
}
.heros .fil-ariane { font-size: 12.5px; margin-bottom: 8px; }
.heros .fil-ariane a { color: rgba(255,255,255,.6); }
.heros h1 { font-size: 24px; }
.heros .sous { color: rgba(255,255,255,.65); margin-top: 3px; font-size: 13.5px; }
.heros .chiffres { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 18px; }
.heros .chiffre .v { font-size: 26px; font-weight: 800; color: var(--teal); letter-spacing: -.5px; }
.heros .chiffre .l { font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.heros .actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

.info-ligne { display: flex; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid var(--fond); }
.info-ligne:last-child { border-bottom: none; }
.info-ligne .cle { width: 120px; color: var(--muet); flex-shrink: 0; }

ul.fil { list-style: none; margin: 0; padding: 0; }
ul.fil li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--fond); font-size: 13.5px; align-items: baseline; }
ul.fil li:last-child { border-bottom: none; }
ul.fil .quand { color: var(--muet); font-size: 12px; white-space: nowrap; min-width: 72px; }

.argument { background: var(--teal-pale); border-left: 3px solid var(--teal); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; font-size: 13.5px; }
.argument .q { font-weight: 700; margin-bottom: 3px; }
details.objection { border-bottom: 1px solid var(--fond); padding: 8px 0; font-size: 13.5px; }
details.objection summary { cursor: pointer; font-weight: 600; color: var(--navy-3); }
details.objection p { margin: 8px 0 2px; color: var(--muet); }

/* --- Formulaires ------------------------------------------------------------------- */
.champ { margin-bottom: 13px; }
.champ label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muet); margin-bottom: 5px; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--bord); border-radius: 9px;
  font: inherit; background: #fff; transition: border-color .15s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,201,180,.15); }
.champ .aide { font-size: 12px; color: var(--muet); margin-top: 4px; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 640px) { .champs-2 { grid-template-columns: 1fr; } }

/* --- Choix de métier (cartes cliquables, pas de jargon) ----------------------------- */
.choix-metier { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
@media (max-width: 640px) { .choix-metier { grid-template-columns: 1fr; } }
.choix-metier label {
  display: block; border: 1.5px solid var(--bord); border-radius: 10px; padding: 12px 14px;
  cursor: pointer; transition: border-color .15s, background .15s; font-size: 13px;
}
.choix-metier label:hover { border-color: var(--teal); }
.choix-metier input { display: none; }
.choix-metier input:checked + div { color: var(--teal-fonce); }
.choix-metier label:has(input:checked) { border-color: var(--teal); background: var(--teal-pale); }
.choix-metier .n { font-weight: 700; }
.choix-metier .d { color: var(--muet); font-size: 12px; margin-top: 2px; }

/* --- Modales -------------------------------------------------------------------------- */
.modale-fond {
  position: fixed; inset: 0; background: rgba(9, 24, 36, .5); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center; z-index: 100;
  padding: 6vh 16px; overflow-y: auto; animation: apparait .15s ease-out;
}
.modale {
  background: var(--surface); border-radius: 16px; box-shadow: var(--ombre-haute);
  width: 620px; max-width: 100%; padding: 26px 28px; animation: monte .18s ease-out;
}
@keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modale h2 { font-size: 18px; margin-bottom: 4px; }
.modale .sous { color: var(--muet); font-size: 13px; margin: 0 0 18px; }
.modale .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* --- Toasts ---------------------------------------------------------------------------- */
.toasts { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast {
  background: var(--navy); color: #fff; border-radius: 11px; padding: 13px 18px;
  box-shadow: var(--ombre-haute); font-size: 13.5px; max-width: 420px;
  display: flex; gap: 10px; align-items: flex-start; animation: monte .2s ease-out;
}
.toast.ok { border-left: 4px solid var(--teal); }
.toast.erreur { border-left: 4px solid var(--rouge); }
.toast .fermer { margin-left: auto; background: none; border: none; color: rgba(255,255,255,.6); font-size: 15px; padding: 0 2px; }

/* --- États vides ------------------------------------------------------------------------- */
.etat-vide { text-align: center; padding: 46px 20px; color: var(--muet); }
.etat-vide .icone { font-size: 34px; margin-bottom: 10px; }
.etat-vide .titre { font-size: 16px; font-weight: 700; color: var(--texte); margin-bottom: 6px; }
.etat-vide p { margin: 0 0 16px; font-size: 13.5px; }

.hypotheses { background: var(--ambre-pale); border-radius: 9px; padding: 10px 14px; font-size: 12.5px; color: var(--ambre); margin-top: 12px; }
.hypotheses ul { margin: 6px 0 0; padding-left: 18px; }

.discret { color: var(--muet); }
.droite { text-align: right; }
[hidden] { display: none !important; }

/* --- Écrans d'authentification (connexion, installation, mdp) --------------- */
body.non-connecte .lateral, body.non-connecte .barre { display: none; }
body.non-connecte { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-3) 100%); }
body.non-connecte .vue { padding: 0; }
.ecran-auth {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 22px; padding: 24px;
}
.ecran-auth .marque { font-size: 30px; font-weight: 800; color: #fff; }
.ecran-auth .marque span { color: var(--teal); }
.ecran-auth .marque small { display: block; text-align: center; font-size: 11px; letter-spacing: 4px; color: rgba(255,255,255,.5); font-weight: 600; margin-top: 4px; }
.carte-auth {
  background: var(--surface); border-radius: 16px; box-shadow: var(--ombre-haute);
  width: 400px; max-width: 100%; padding: 28px 30px;
}
.carte-auth h2 { margin-bottom: 4px; }
.carte-auth .sous { color: var(--muet); font-size: 13px; margin: 0 0 18px; }
.carte-auth .bouton { width: 100%; justify-content: center; margin-top: 6px; }

/* --- Zone utilisateur (barre latérale) ---------------------------------------- */
#zone-utilisateur { padding: 12px; }
.puce-utilisateur {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(255,255,255,.06); border-radius: 11px; color: #fff;
}
.puce-utilisateur .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--teal);
  color: #05261f; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.puce-utilisateur .qui { min-width: 0; flex: 1; }
.puce-utilisateur .nom { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce-utilisateur .role { font-size: 11px; color: rgba(255,255,255,.5); }
.puce-utilisateur .sortir {
  background: none; border: none; color: rgba(255,255,255,.55); padding: 4px;
  border-radius: 7px; display: flex;
}
.puce-utilisateur .sortir:hover { color: #fff; background: rgba(255,255,255,.1); }
.puce-utilisateur .sortir svg { width: 16px; height: 16px; fill: currentColor; }

/* --- Vue Équipe ------------------------------------------------------------------ */
.badge.role-admin { background: var(--navy); color: #fff; }
.badge.role-vendeur { background: var(--teal-pale); color: var(--teal-fonce); }
.badge.inactif { background: var(--rouge-pale); color: var(--rouge); }
.badge.provisoire { background: var(--ambre-pale); color: var(--ambre); }
.mdp-genere {
  font-family: Consolas, monospace; font-size: 16px; letter-spacing: 1px;
  background: var(--teal-pale); border: 1px dashed var(--teal); border-radius: 9px;
  padding: 10px 14px; text-align: center; margin: 10px 0; user-select: all;
}