/* =====================================================================
   Plateforme de prospection — design « nude », modes clair et sombre.
   Palette de graphiques validée (bandes de luminosité, chroma,
   séparation daltonisme, contraste) pour les deux surfaces.
   ===================================================================== */

/* ---------- Mode clair (par défaut) ---------- */
:root{
  color-scheme:light;

  --plan:#F4EFE7;            /* fond de page — sable chaud */
  --surface:#FFFDFA;         /* cartes */
  --surface-2:#F1EADF;       /* remplissage discret */
  --surface-3:#E9E0D2;       /* survol */
  --bord:#E4DBCE;
  --bord-fort:#D2C5B2;

  --encre:#2B2521;           /* texte principal */
  --encre-2:#5C5248;         /* texte secondaire */
  --doux:#78695A;            /* libellés, axes */

  --accent:#A85C36;          /* terre cuite — action principale */
  --accent-vif:#8C4826;
  --accent-doux:#F4E5DA;     /* fond teinté */
  --accent-encre:#8C4826;    /* accent lisible sur texte */
  --sur-accent:#FFF8F3;      /* texte posé sur l'accent */

  --succes:#3E6F45;
  --succes-doux:#E3EDE2;
  --alerte:#87590F;
  --alerte-doux:#F7EBD5;
  --critique:#A2432D;
  --critique-doux:#F7E3DC;
  --info:#1B6485;
  --info-doux:#DFEBF2;

  --serie-1:#BB5528;         /* graphiques — validé mode clair */
  --serie-2:#17709B;

  --ombre:0 1px 2px rgba(60,44,30,.05), 0 8px 24px -12px rgba(60,44,30,.14);
  --ombre-forte:0 2px 4px rgba(60,44,30,.06), 0 16px 40px -16px rgba(60,44,30,.2);
  --r:16px; --r-s:11px;
  --trans:.18s cubic-bezier(.4,0,.2,1);
}

/* ---------- Mode sombre — pas une inversion, des pas choisis ---------- */
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])){
    color-scheme:dark;
    --plan:#181513;
    --surface:#221E1B;
    --surface-2:#2C2723;
    --surface-3:#37312C;
    --bord:#38312B;
    --bord-fort:#4A4139;

    --encre:#F2EBE2;
    --encre-2:#C4B8AA;
    --doux:#9C9084;

    --accent:#CE8A5F;
    --accent-vif:#E0A077;
    --accent-doux:#3A2A20;
    --accent-encre:#E2A47C;
    --sur-accent:#1E1A17;

    --succes:#7FB183;
    --succes-doux:#25301F;
    --alerte:#D6A757;
    --alerte-doux:#332818;
    --critique:#DC8069;
    --critique-doux:#3A241E;
    --info:#6FB0D2;
    --info-doux:#1D2B33;

    --serie-1:#CE6E3E;       /* graphiques — validé mode sombre */
    --serie-2:#3E97C4;

    --ombre:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --ombre-forte:0 2px 4px rgba(0,0,0,.35), 0 16px 40px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --plan:#181513;
  --surface:#221E1B;
  --surface-2:#2C2723;
  --surface-3:#37312C;
  --bord:#38312B;
  --bord-fort:#4A4139;

  --encre:#F2EBE2;
  --encre-2:#C4B8AA;
  --doux:#9C9084;

  --accent:#CE8A5F;
  --accent-vif:#E0A077;
  --accent-doux:#3A2A20;
  --accent-encre:#E2A47C;
  --sur-accent:#1E1A17;

  --succes:#7FB183;
  --succes-doux:#25301F;
  --alerte:#D6A757;
  --alerte-doux:#332818;
  --critique:#DC8069;
  --critique-doux:#3A241E;
  --info:#6FB0D2;
  --info-doux:#1D2B33;

  --serie-1:#CE6E3E;
  --serie-2:#3E97C4;

  --ombre:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --ombre-forte:0 2px 4px rgba(0,0,0,.35), 0 16px 40px -16px rgba(0,0,0,.6);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--plan);color:var(--encre);
  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-encre);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{margin:0 0 .35em;line-height:1.2;letter-spacing:-.017em;font-weight:650}
main{max-width:1200px;margin:0 auto;padding:26px 20px 72px}

/* ---------- Barre de navigation ---------- */
.barre{
  display:flex;align-items:center;gap:20px;padding:11px 20px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:50;
}
.marque{font-weight:700;font-size:16px;color:var(--encre);letter-spacing:-.03em}
.marque span{color:var(--accent-encre)}
.barre nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.barre nav::-webkit-scrollbar{display:none}
.barre nav a{
  display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;
  color:var(--encre-2);font-weight:550;font-size:14px;white-space:nowrap;transition:var(--trans);
}
.barre nav a:hover{background:var(--surface-2);color:var(--encre);text-decoration:none}
.barre nav a.on{background:var(--accent);color:var(--sur-accent);box-shadow:var(--ombre)}
.barre nav i{font-style:normal;opacity:.85}
.outils{display:flex;align-items:center;gap:10px}
.theme-btn{
  display:grid;place-items:center;width:36px;height:36px;border-radius:10px;cursor:pointer;
  border:1px solid var(--bord);background:var(--surface-2);color:var(--encre-2);
  font-size:15px;transition:var(--trans);padding:0;
}
.theme-btn:hover{background:var(--surface-3);color:var(--encre)}
.theme-btn .clair{display:none}
:root[data-theme="dark"] .theme-btn .clair{display:block}
:root[data-theme="dark"] .theme-btn .sombre{display:none}
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])) .theme-btn .clair{display:block}
  :root:where(:not([data-theme="light"])) .theme-btn .sombre{display:none}
}
.sortie{color:var(--doux);font-size:13px;white-space:nowrap}
.sortie:hover{color:var(--encre);text-decoration:none}

/* ---------- Connexion ---------- */
.fond-connexion{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:var(--plan)}
.carte-connexion{
  background:var(--surface);border:1px solid var(--bord);border-radius:22px;
  padding:38px 34px;width:100%;max-width:390px;box-shadow:var(--ombre-forte);
}
.carte-connexion h1{font-size:27px;margin-bottom:3px;letter-spacing:-.03em}
.carte-connexion h1 span{color:var(--accent-encre)}
.carte-connexion .sous{color:var(--doux);font-size:13.5px;margin:0 0 26px}
.carte-connexion label{display:block;margin-bottom:15px;font-size:13px;color:var(--encre-2);font-weight:600}
.carte-connexion input{
  width:100%;margin-top:7px;padding:12px 14px;border-radius:var(--r-s);border:1px solid var(--bord-fort);
  background:var(--plan);color:var(--encre);font-size:16px;font-family:inherit;transition:var(--trans);
}
.carte-connexion input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-doux)}
.erreur{background:var(--critique-doux);border:1px solid var(--critique);color:var(--critique);
  padding:10px 13px;border-radius:var(--r-s);font-size:13px;margin:0 0 16px}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 17px;border-radius:var(--r-s);border:1px solid var(--bord-fort);
  background:var(--surface);color:var(--encre);font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:var(--trans);
}
.btn:hover{background:var(--surface-2);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primaire{background:var(--accent);border-color:var(--accent);color:var(--sur-accent);box-shadow:var(--ombre)}
.btn.primaire:hover{background:var(--accent-vif);border-color:var(--accent-vif)}
.btn.primaire:disabled{background:var(--surface-2);border-color:var(--bord);color:var(--doux);
  cursor:not-allowed;box-shadow:none;transform:none}
.btn.large{width:100%;padding:15px;font-size:15.5px}
.btn.mini{padding:6px 12px;font-size:13px;border-radius:9px}
.btn.fantome{background:transparent;border-color:transparent;color:var(--doux)}
.btn.fantome:hover{background:var(--surface-2);color:var(--encre)}
.btn.appel{
  background:var(--succes);border-color:var(--succes);color:var(--surface);
  font-weight:700;letter-spacing:-.01em;box-shadow:var(--ombre);
}
.btn.appel:hover{filter:brightness(1.06)}

/* ---------- Bandeau de l'écran d'appel ---------- */
.bandeau{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
  padding:13px 16px;margin-bottom:16px;box-shadow:var(--ombre);
}
.compteurs{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.compteurs b{font-size:21px;font-weight:700;letter-spacing:-.03em}
.compteurs b.vert{color:var(--succes)}
.compteurs span{color:var(--doux);font-size:13px;margin-right:14px}
.filtres{display:flex;gap:8px;flex-wrap:wrap}
.filtres select,.recherche select,.recherche .q{
  padding:9px 12px;border-radius:10px;border:1px solid var(--bord-fort);
  background:var(--surface);color:var(--encre);font-size:14px;font-family:inherit;transition:var(--trans);
}
.filtres select:focus,.recherche select:focus,.recherche .q:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-doux)}
.reste{color:var(--doux);font-size:13px}
.reste b{color:var(--encre);font-size:16px;font-weight:650}
.jauge{height:5px;background:var(--surface-2);border:1px solid var(--bord);border-radius:99px;
  overflow:hidden;margin-bottom:18px}
.jauge i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .45s ease}

/* ---------- Fiche prospect ---------- */
.fiche{background:var(--surface);border:1px solid var(--bord);border-radius:20px;
  overflow:hidden;box-shadow:var(--ombre-forte)}
.fiche-tete{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:24px 26px;background:var(--surface-2);border-bottom:1px solid var(--bord);
}
.fiche-tete h1{font-size:27px;letter-spacing:-.03em;font-weight:680}
.fiche-tete .meta{margin:2px 0 0;color:var(--doux);font-size:14px}
.colonnes{display:grid;grid-template-columns:1.1fr 1fr}
.bloc-appel{padding:24px 26px;border-right:1px solid var(--bord)}
.bloc-saisie{padding:24px 26px;background:var(--surface-2)}
.lib{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--doux);font-weight:700;margin-bottom:7px}

.btn.appel{width:100%;font-size:21px;padding:18px}
.sans-tel{background:var(--alerte-doux);border:1px solid var(--alerte);color:var(--alerte);
  padding:12px 14px;border-radius:var(--r-s);font-size:13.5px;margin:0}
.dirigeant{margin:14px 0 0;font-size:15px;color:var(--encre-2)}
.dirigeant b{color:var(--encre)}
.dirigeant span{color:var(--doux);font-size:13px}
.avis{display:flex;align-items:baseline;gap:10px;margin:18px 0;padding:14px 16px;
  background:var(--surface-2);border:1px solid var(--bord);border-radius:var(--r-s)}
.avis b{font-size:23px;color:var(--encre);font-weight:700;letter-spacing:-.03em}
.avis span{color:var(--doux);font-size:14px}
.web{margin:18px 0}
.web b{font-size:15px;font-weight:650}
.web a{margin-left:9px;font-size:13px;word-break:break-all}
.pw-1{color:var(--succes)} .pw-2{color:var(--alerte)} .pw-3{color:var(--info)}
.pw-4{color:var(--critique)} .pw-5{color:var(--doux)}
.pitch{margin:18px 0;padding:15px 17px;background:var(--accent-doux);
  border-left:3px solid var(--accent);border-radius:0 var(--r-s) var(--r-s) 0}
.pitch .lib{color:var(--accent-encre)}
.pitch p{margin:0;font-size:15px;font-weight:600;color:var(--encre)}
.pitch .accroche{margin-top:11px;font-weight:400;font-style:italic;color:var(--encre-2);
  font-size:14px;line-height:1.55}
.adresse{color:var(--encre-2);font-size:14px;margin:18px 0 9px}
.liens{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:13px}
.liens .siret{color:var(--doux);font-size:12px;flex-basis:100%;font-variant-numeric:tabular-nums}

.statuts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}
.btn.statut{padding:13px 8px;font-size:14px;background:var(--surface)}
.btn.statut.choisi{background:var(--accent);border-color:var(--accent);color:var(--sur-accent);
  box-shadow:0 0 0 3px var(--accent-doux)}
.champ{display:block;margin-bottom:15px;font-size:13px;color:var(--encre-2);font-weight:600}
.champ input,.champ textarea{
  width:100%;margin-top:7px;padding:11px 13px;border-radius:var(--r-s);border:1px solid var(--bord-fort);
  background:var(--surface);color:var(--encre);font-size:15px;font-family:inherit;
  resize:vertical;transition:var(--trans);
}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-doux)}
.champ.actif input{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-doux)}
.case{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--encre-2);
  margin-bottom:18px;cursor:pointer}
.case input{width:17px;height:17px;accent-color:var(--critique)}
.case small{color:var(--doux)}
.actions{display:flex;flex-direction:column;gap:10px}

/* ---------- Badges & chips ---------- */
.badge{padding:6px 13px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap;
  border:1px solid transparent}
.badge.p1{background:var(--succes-doux);color:var(--succes);border-color:var(--succes)}
.badge.p2{background:var(--alerte-doux);color:var(--alerte);border-color:var(--alerte)}
.badge.p3{background:var(--info-doux);color:var(--info);border-color:var(--info)}
.badge.p4{background:var(--critique-doux);color:var(--critique);border-color:var(--critique)}
.badge.p5{background:var(--surface-2);color:var(--doux);border-color:var(--bord-fort)}
.chip{background:var(--surface-2);border:1px solid var(--bord);padding:3px 10px;
  border-radius:99px;font-size:12px;white-space:nowrap;color:var(--encre-2)}
.chip.vide2{background:transparent;color:var(--doux);border-style:dashed}
.pastille{background:var(--accent);color:var(--sur-accent);border-radius:99px;padding:2px 11px;
  font-size:13px;margin-left:8px;font-weight:650}
.pastille.gris{background:var(--surface-3);color:var(--encre-2)}

/* ---------- Cartes & tableaux ---------- */
.carte{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
  padding:20px;margin-bottom:18px;box-shadow:var(--ombre)}
.carte h2{font-size:16px;font-weight:650}
.titre-page{font-size:25px;margin-bottom:16px;font-weight:680}
.intro{color:var(--encre-2);margin:-8px 0 18px;font-size:14px;max-width:72ch}
.resultat{color:var(--doux);font-size:14px;margin:0 0 12px}
.resultat b{color:var(--encre)}
.recherche{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.recherche .q{flex:1;min-width:240px;font-size:15.5px}
.tableau-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tableau{width:100%;border-collapse:collapse;font-size:14px}
.tableau th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--doux);font-weight:700;padding:9px 11px;border-bottom:1px solid var(--bord);white-space:nowrap;
}
.tableau td{padding:12px 11px;border-bottom:1px solid var(--bord);vertical-align:middle}
.tableau tbody tr{transition:background var(--trans)}
.tableau tbody tr:hover{background:var(--surface-2)}
.tableau tr:last-child td{border-bottom:0}
.tableau tr.retard td{background:var(--critique-doux)}
.tableau .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tableau .date{color:var(--doux);white-space:nowrap;font-variant-numeric:tabular-nums}
.tableau .comm{color:var(--encre-2);max-width:290px}
.tableau .nowrap{white-space:nowrap}
.tableau.compact td{padding:8px 11px}
.sous2{display:block;color:var(--doux);font-size:12px}
.note{display:block;color:var(--doux);font-size:12px;font-style:italic;margin-top:3px}
.gris2{color:var(--doux)}
.vert{color:var(--succes)}
td.barre{min-width:130px}
td.barre i{display:block;height:7px;background:var(--serie-2);border-radius:4px;min-width:2px}
td.barre small{color:var(--doux);font-size:11px}
.pagination{display:flex;gap:16px;align-items:center;justify-content:center;color:var(--doux);
  font-size:14px;margin:18px 0}
.vide{text-align:center;padding:80px 20px;color:var(--doux)}
.vide h2{color:var(--encre)}
.vide-mini{color:var(--doux);font-size:14px;margin:8px 0 0}

/* ---------- Tableau de bord ---------- */
.tdb-tete{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--ombre)}
.kpi span{display:block;color:var(--doux);font-size:11px;text-transform:uppercase;
  letter-spacing:.09em;font-weight:700}
.kpi b{display:block;font-size:30px;font-weight:700;margin-top:5px;letter-spacing:-.035em}
.kpi i{font-style:normal;color:var(--doux);font-size:12px}
.kpi.vert b{color:var(--succes)}
.kpi.gris b{color:var(--encre-2)}
.grille2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.histo{display:flex;align-items:flex-end;gap:6px;height:158px;padding-top:12px}
.histo .col{flex:1;max-width:46px;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;gap:2px}
.histo i{width:100%;background:var(--serie-1);border-radius:4px 4px 0 0;display:block}
.histo u{width:100%;background:var(--serie-2);border-radius:4px;display:block}
.histo span{font-size:10px;color:var(--doux);margin-top:6px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.legende{color:var(--encre-2);font-size:12.5px;margin:14px 0 0;display:flex;gap:16px;align-items:center}
.pl{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:middle;margin-right:5px}
.pl.bleu{background:var(--serie-1)} .pl.vert{background:var(--serie-2)}
.zones{display:flex;flex-wrap:wrap;gap:9px}
.zone{
  display:flex;flex-direction:column;background:var(--surface-2);border:1px solid var(--bord);
  border-radius:var(--r-s);padding:10px 14px;color:var(--encre);min-width:124px;transition:var(--trans);
}
.zone:hover{background:var(--surface-3);text-decoration:none;transform:translateY(-1px)}
.zone.on{border-color:var(--accent);background:var(--accent-doux)}
.zone b{font-size:14px;font-weight:650}
.zone span{color:var(--doux);font-size:11px}
.zone i{font-style:normal;color:var(--accent-encre);font-weight:700;font-size:13px;margin-top:4px}

/* ---------- Mobile ---------- */
@media (max-width:880px){
  .colonnes{grid-template-columns:1fr}
  .bloc-appel{border-right:0;border-bottom:1px solid var(--bord)}
  .grille2{grid-template-columns:1fr}
  .barre nav a span{display:none}
  .barre nav a{padding:9px 13px;font-size:17px}
  .barre{gap:12px;padding:10px 14px}
  .marque{font-size:15px}
  .sortie{font-size:0}
  .sortie::after{content:'⏻';font-size:16px}
  main{padding:18px 14px 60px}
  .fiche-tete{padding:20px}
  .fiche-tete h1{font-size:22px}
  .bloc-appel,.bloc-saisie{padding:20px}
  .bandeau{padding:13px}
  .compteurs b{font-size:19px}
  .kpi b{font-size:26px}
}

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