/* WA Prospection — outil de travail répétitif, pas une vitrine.
   Palette L4GROUP, typographie système, densité maximale sur 13". */
:root{
  --ink:#15303A; --slate:#4A6069; --line:#DCE7E9; --paper:#FFFFFF;
  --mist:#F1F7F8; --pagebg:#E8F0F1;
  --cyan:#3AB5CE; --teal:#1E8FA8; --teal-deep:#136477;
  --green:#2E8B57; --gold:#EFBE41; --rouge:#C0392B; --wa:#25D366;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,'Segoe UI',Inter,sans-serif;
  color:var(--ink); background:var(--pagebg); line-height:1.45; font-size:14px;
}
a{color:var(--teal)}
button{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:9px 14px;background:var(--mist);color:var(--ink);border:1px solid var(--line)}
button:hover{background:#e4eff1}
button:disabled{opacity:.45;cursor:not-allowed}
.btn-primaire{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-primaire:hover{background:var(--teal-deep)}
.btn-wa{background:var(--wa);color:#06331a;border-color:#1eb457;font-weight:600}
.btn-wa:hover{background:#1eb457;color:#fff}
.btn-danger{background:#fdeceb;color:var(--rouge);border-color:#f3c8c4}

/* ---- barre du haut ---- */
header.barre{
  display:flex;align-items:center;gap:18px;padding:8px 16px;
  background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;
}
header.barre .marque{font-weight:700;letter-spacing:-.01em}
header.barre .marque span{color:var(--teal)}
header.barre nav{display:flex;gap:4px;margin-left:8px}
header.barre nav a{padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--slate);font-weight:500}
header.barre nav a:hover{background:var(--mist)}
header.barre nav a.actif{background:var(--mist);color:var(--ink)}
header.barre .droite{margin-left:auto;display:flex;align-items:center;gap:12px}
.compteur{
  display:flex;align-items:baseline;gap:6px;background:var(--mist);
  border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-variant-numeric:tabular-nums;
}
.compteur b{font-size:16px}
.compteur.plein{background:#fdeceb;border-color:#f3c8c4;color:var(--rouge)}
.compteur small{color:var(--slate)}

main{max-width:1080px;margin:0 auto;padding:16px}
.bandeau{padding:10px 14px;border-radius:var(--radius);margin-bottom:12px;border:1px solid}
.bandeau.alerte{background:#fdf3e2;border-color:#f0d9a8;color:#7a5b12}
.bandeau.stop{background:#fdeceb;border-color:#f3c8c4;color:var(--rouge)}
.bandeau.info{background:var(--mist);border-color:var(--line);color:var(--slate)}

/* ---- carte prospect ---- */
.carte{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.carte .entete{display:flex;align-items:flex-start;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}
.carte h1{font-size:19px;line-height:1.2}
.carte .meta{color:var(--slate);font-size:13px;margin-top:2px}
.carte .etiquettes{margin-left:auto;display:flex;gap:6px;align-items:center}
.tag{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  padding:3px 8px;border-radius:999px;background:var(--mist);color:var(--slate);border:1px solid var(--line)}
.tag.etape{background:var(--ink);color:#fff;border-color:var(--ink)}
.tag.prio-A{background:#fdf3e2;color:#8a6410;border-color:#f0d9a8}

/* ---- constat GEO : l'argument, lisible en une seconde ---- */
.geo{padding:14px 16px;background:var(--mist);border-bottom:1px solid var(--line)}
.geo .verdict{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.geo .verdict.absent{color:var(--rouge)}
.geo .verdict.cite{color:var(--green)}
.geo .requete{color:var(--slate);font-size:12px;margin-bottom:6px}
.geo ol{margin:8px 0 0 18px;columns:2;font-size:13px}
.geo ol li{margin-bottom:2px}
.geo .vide{color:var(--slate);font-style:italic}

.corps{display:grid;grid-template-columns:1fr 250px;gap:0}
.zone-message{padding:14px 16px}
.zone-message label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);font-weight:600}
textarea#message{
  width:100%;min-height:190px;margin-top:6px;padding:11px 12px;border:1px solid var(--line);
  border-radius:8px;font:inherit;line-height:1.5;resize:vertical;background:#fcfefe;
}
textarea#message:focus{outline:2px solid var(--cyan);outline-offset:-1px}
.sous-message{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:var(--slate)}
.sous-message .compte-car{font-variant-numeric:tabular-nums}
.aside{border-left:1px solid var(--line);padding:14px 16px;background:#fbfdfd}
.aside dl{font-size:13px}
.aside dt{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin-top:8px}
.aside dd{word-break:break-word}
.actions{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);align-items:center}
.actions .btn-wa{padding:12px 20px;font-size:15px}
.actions .droite{margin-left:auto;display:flex;gap:8px}

/* ---- écran de qualification ---- */
.qualif{padding:16px}
.qualif h2{font-size:16px;margin-bottom:4px}
.qualif p{color:var(--slate);margin-bottom:12px}
.qualif .choix{display:flex;flex-wrap:wrap;gap:8px}
.qualif .choix button{padding:12px 16px}

/* ---- tableaux / formulaires ---- */
table{width:100%;border-collapse:collapse;background:var(--paper);font-size:13px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--mist);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.panneau{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.panneau h2{font-size:15px;margin-bottom:10px}
input[type=text],input[type=email],input[type=number],input[type=date],select,textarea{
  font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fcfefe;color:var(--ink);width:100%
}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.champ label{display:block;font-size:12px;color:var(--slate);margin-bottom:3px}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.tuile{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.tuile b{display:block;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.tuile span{font-size:12px;color:var(--slate)}
.vide-file{text-align:center;padding:60px 20px;color:var(--slate);background:var(--paper);
  border:1px dashed var(--line);border-radius:var(--radius)}

@media (max-width:860px){
  .corps{grid-template-columns:1fr}
  .aside{border-left:0;border-top:1px solid var(--line)}
  .geo ol{columns:1}
  header.barre nav a{padding:6px 8px}
}