/* Cockpit Prospection ORGANIWEB
   Charte ORGANIWEB : bleu #3478d4 (principal), vert #82b933 (accents/validations),
   anthracite #4f5053 (textes), gris clair #f4f6f8 (fonds), blanc (cartes).
   Typographies systeme. 0 framework, 0 CDN. */
:root{
  --bleu:#3478d4; --bleu-fonce:#245da8; --bleu-clair:#eaf2fc;
  --vert:#82b933; --vert-fonce:#638e26; --vert-clair:#f0f7e6;
  --anthracite:#4f5053; --gris-700:#5f6368; --gris-300:#d9dde3; --gris-100:#f4f6f8;
  --fond:#f4f6f8; --carte:#ffffff; --texte:#000000; --texte-2:#5f6368;
  --bord:#d9dde3; --entete:#245da8;
  --ok:#638e26; --alerte:#c0392b;
}
*{box-sizing:border-box}
/* Un element marque hidden doit rester invisible, meme si une regle de classe
   lui impose un display (piege vecu : le panneau lateral ferme bloquait les clics). */
[hidden]{display:none !important}
body{margin:0;background:var(--fond);color:var(--texte);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1rem;line-height:1.6}
h1,h2,h3{margin:0 0 10px;line-height:1.2}
h2{font-size:1.125rem;color:var(--anthracite)}
h3{color:var(--anthracite)}
a{color:var(--bleu-fonce)}
.aide{color:var(--texte-2);font-size:.875rem;margin:0 0 12px}
.espace-haut{margin-top:26px}

/* --- Connexion --- */
.login-voile{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-carte{background:var(--carte);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:34px 30px;width:100%;max-width:390px;text-align:center}
.login-carte .logo-img{max-width:210px;height:auto;margin:0 auto 16px;display:block}
.login-carte input{width:100%;padding:12px 14px;border:1px solid var(--bord);border-radius:8px;margin:10px 0}
.login-carte .btn-principal{width:100%}
.erreur{color:var(--alerte);font-size:.9rem}
.lien-retour{display:inline-block;margin-top:14px;font-size:.875rem;color:var(--texte-2)}

/* --- En-tete --- */
.entete{background:var(--entete);color:#fff;position:sticky;top:0;z-index:20}
.entete-contenu{max-width:1280px;margin:auto;display:flex;align-items:center;gap:20px;
  padding:10px 20px;flex-wrap:wrap}
.entete-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:600}
.entete-logo img{height:32px;width:auto;background:#fff;border-radius:6px;padding:3px 6px}
.onglets{display:flex;gap:4px;flex-wrap:wrap}
.onglets button{background:transparent;border:0;color:rgba(255,255,255,.82);padding:8px 13px;
  border-radius:8px;cursor:pointer;font-size:.9rem;font-family:inherit;transition:background .15s}
.onglets button:hover{background:rgba(255,255,255,.14);color:#fff}
.onglets button.actif{background:#fff;color:var(--bleu-fonce);font-weight:600}
.entete-actions{margin-left:auto;display:flex;gap:14px;font-size:.85rem}
.entete-actions a{color:rgba(255,255,255,.82);text-decoration:none}
.entete-actions a:hover{color:#fff}
.lien-quitter{color:#d7e7ff !important}

/* --- Structure --- */
.conteneur{max-width:1280px;margin:auto;padding:22px 20px 60px}
.carte{background:var(--carte);border-radius:12px;padding:22px;box-shadow:0 2px 10px rgba(0,0,0,.05);
  margin-bottom:20px;border:1px solid var(--gris-300)}
.chargement{padding:40px;text-align:center;color:var(--texte-2)}
.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1000px){.deux-colonnes{grid-template-columns:1fr}}

/* --- Chiffres cles --- */
.grille-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:20px}
.chiffre{background:var(--carte);border-radius:12px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.05);
  border:1px solid var(--gris-300);border-left:4px solid var(--bleu)}
.chiffre .valeur{font-size:1.75rem;font-weight:700;line-height:1.1;color:var(--bleu-fonce)}
.chiffre .libelle{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-2);margin-top:4px}

/* --- Boutons --- */
.btn-principal,.btn-clair,.btn-mini,.btn-vert{border:0;border-radius:8px;cursor:pointer;font-family:inherit;
  font-size:.9rem;padding:9px 16px;transition:background .15s,color .15s}
.btn-principal{background:var(--bleu);color:#fff;font-weight:600}
.btn-principal:hover{background:var(--bleu-fonce)}
.btn-clair{background:#fff;color:var(--bleu-fonce);border:1px solid var(--bleu);text-decoration:none;display:inline-block}
.btn-clair:hover{background:var(--bleu-clair)}
.btn-vert{background:var(--vert);color:#fff}
.btn-mini{padding:5px 10px;font-size:.8rem;background:#fff;border:1px solid var(--gris-300);color:var(--anthracite)}
.btn-mini:hover{background:var(--gris-100)}
[disabled]{opacity:.5;cursor:not-allowed}

/* --- Filtres et champs --- */
.barre-filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.barre-filtres input,.barre-filtres select,textarea,input[type=text],input[type=search],input[type=password]{
  padding:9px 12px;border:1px solid var(--bord);border-radius:8px;font-family:inherit;font-size:.9rem;
  background:#fff;color:var(--texte)}
.barre-filtres input:focus,.barre-filtres select:focus,textarea:focus{
  outline:2px solid var(--bleu-clair);border-color:var(--bleu)}
.barre-filtres input[type=search]{min-width:250px}
textarea{width:100%;resize:vertical}
.case{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--texte-2)}

/* --- Tableaux --- */
.tableau-defilant{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--gris-300);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--texte-2);background:var(--gris-100)}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--bleu-clair)}
td.nom{font-weight:600}

/* --- Pastilles de statut --- */
.pastille{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.75rem;font-weight:600;white-space:nowrap}
.p-nouveau{background:var(--bleu-clair);color:var(--bleu-fonce)}
.p-a_maquetter{background:#fff4dd;color:#8a5a00}
.p-maquette_prete{background:var(--bleu-clair);color:var(--bleu-fonce)}
.p-contacte{background:var(--vert-clair);color:var(--vert-fonce)}
.p-relance{background:#fdeee0;color:#98540a}
.p-client{background:var(--vert);color:#fff}
.p-ecarte{background:#ececec;color:var(--gris-700)}
.badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.72rem;font-weight:600}
.b-sanssite{background:#fdecea;color:#b53226}
.b-site{background:var(--gris-100);color:var(--texte-2)}
.b-score{background:var(--bleu);color:#fff}

/* --- Pagination --- */
.pagination{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:16px;flex-wrap:wrap}
.pagination button{padding:6px 12px;border:1px solid var(--bord);background:#fff;border-radius:8px;
  cursor:pointer;font-family:inherit;color:var(--bleu-fonce)}
.pagination button:hover{background:var(--bleu-clair)}

/* --- Histogramme --- */
.histogramme{display:flex;align-items:flex-end;gap:6px;height:120px}
.histogramme .barre{flex:1;background:linear-gradient(180deg,#6ba3e6,var(--bleu));border-radius:5px 5px 0 0;
  min-height:3px;position:relative}
.histogramme .barre span{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:.7rem;color:var(--texte-2)}
.histogramme-legende{display:flex;gap:6px;margin-top:6px}
.histogramme-legende div{flex:1;text-align:center;font-size:.68rem;color:var(--texte-2)}
.deux-listes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.liste-simple{list-style:none;margin:0;padding:0;font-size:.9rem}
.liste-simple li{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--gris-300)}

/* --- Fiche prospect (panneau lateral) --- */
.tiroir-voile{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:30}
.tiroir{position:fixed;top:0;right:0;bottom:0;width:min(720px,100%);background:var(--fond);z-index:31;
  overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.18);display:flex;flex-direction:column}
.tiroir-entete{background:var(--entete);color:#fff;padding:14px 20px;display:flex;align-items:center;
  justify-content:space-between;position:sticky;top:0;z-index:2}
.tiroir-entete h2{margin:0;font-size:1.05rem;color:#fff}
.btn-fermer{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:8px;padding:7px 13px;
  cursor:pointer;font-family:inherit}
.btn-fermer:hover{background:rgba(255,255,255,.3)}
.tiroir-corps{padding:20px}
.bloc{background:var(--carte);border-radius:10px;padding:16px;margin-bottom:14px;border:1px solid var(--gris-300)}
.bloc h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-2);margin-bottom:10px}
.fait{display:flex;gap:10px;padding:3px 0;font-size:.9rem}
.fait .cle{flex:0 0 150px;color:var(--texte-2)}
.fait .val{flex:1;word-break:break-word}
.liens-rapides{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.generateur{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.generateur select,.generateur input{padding:8px 10px;border:1px solid var(--bord);border-radius:8px;font-family:inherit}
.variante{background:var(--gris-100);border:1px solid var(--gris-300);border-radius:10px;padding:14px;margin-bottom:12px}
.variante .objet{font-weight:600;margin-bottom:8px;color:var(--bleu-fonce)}
.variante pre{white-space:pre-wrap;font-family:inherit;margin:0 0 10px;font-size:.9rem}
.variante .actions{display:flex;gap:8px;flex-wrap:wrap}
.timeline{list-style:none;margin:0;padding:0;font-size:.86rem}
.timeline li{padding:6px 0;border-bottom:1px dashed var(--gris-300);display:flex;gap:10px}
.timeline .quand{color:var(--texte-2);flex:0 0 120px}
.note-statut{font-size:.78rem;color:var(--texte-2);margin-top:4px}
select.statut-select{padding:5px 8px;border:1px solid var(--bord);border-radius:7px;font-family:inherit;font-size:.85rem}

/* --- Messages flottants --- */
.avis{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:11px 20px;border-radius:9px;
  font-size:.9rem;z-index:40;box-shadow:0 6px 20px rgba(0,0,0,.18);color:#fff}
.avis-ok{background:var(--bleu-fonce)}
.avis-erreur{background:var(--alerte)}
.statut-vert{color:var(--vert-fonce);font-weight:600}

/* --- Mobile --- */
@media(max-width:640px){
  .entete-contenu{gap:10px;padding:10px 14px}
  .onglets button{padding:7px 10px;font-size:.85rem}
  .conteneur{padding:16px 14px 50px}
  .carte{padding:16px}
  .barre-filtres input[type=search]{min-width:100%}
  .histogramme{height:90px}
}