:root {
  --bg: #f6f5f3; --card: #fff; --card2: #faf9f7; --txt: #1b1b1b; --mut: #6d6a66; --line: #e6e3de; --acc: #e4572e; --acc-txt: #fff;
  --hot: #c8431f; --hot-bg: #fde6df; --warm: #9a5f0c; --warm-bg: #fcefd8; --cold: #3a64c0; --cold-bg: #e5ecfb;
  --ok: #23845a; --ok-bg: #ddf3e8; --ko: #b53a3a; --chip: #efedea; --focus: #e4572e66;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151514; --card: #1f1e1d; --card2: #252422; --txt: #eceae6; --mut: #9c978f; --line: #33312e;
    --hot: #ff7a55; --hot-bg: #4a2419; --warm: #f0ad4e; --warm-bg: #43321a; --cold: #7ea2f0; --cold-bg: #1f2c4a;
    --ok: #5fcf97; --ok-bg: #173a2a; --ko: #ff8080; --chip: #2b2a28; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151514; --card: #1f1e1d; --card2: #252422; --txt: #eceae6; --mut: #9c978f; --line: #33312e;
  --hot: #ff7a55; --hot-bg: #4a2419; --warm: #f0ad4e; --warm-bg: #43321a; --cold: #7ea2f0; --cold-bg: #1f2c4a;
  --ok: #5fcf97; --ok-bg: #173a2a; --ko: #ff8080; --chip: #2b2a28; color-scheme: dark;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--txt); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif }
a { color: inherit }
h1, h2, h3 { margin: 0; line-height: 1.2 }
h1 { font-size: 22px } h2 { font-size: 16px } h3 { font-size: 14px }
.mut { color: var(--mut) }
.chargement { padding: 40px; text-align: center; color: var(--mut) }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px }

/* Barre du haut */
.top { position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 1px solid var(--line) }
.top-in { max-width: 1280px; margin: auto; padding: 0 16px; height: 54px; display: flex; align-items: center; gap: 22px }
.logo { font-weight: 900; letter-spacing: .04em; text-decoration: none; display: flex; align-items: center; gap: 8px; white-space: nowrap }
.logo img { width: 24px; height: 24px }
.logo span { color: var(--acc) }
.top nav { display: flex; gap: 4px; flex: 1; overflow-x: auto }
.top nav a { text-decoration: none; padding: 7px 11px; border-radius: 8px; color: var(--mut); white-space: nowrap }
.top nav a[aria-current="page"] { color: var(--txt); background: var(--chip); font-weight: 600 }
.moi { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 13px; white-space: nowrap }
.seulement-mobile { display: none }

main { max-width: 1280px; margin: auto; padding: 22px 16px 60px }
.entete { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px }
.entete .mut { margin-top: 4px }
.actions { display: flex; flex-wrap: wrap; gap: 8px }

/* Éléments de formulaire */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--txt); border-radius: 8px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; white-space: nowrap }
.btn:hover { border-color: var(--mut) }
.btn:disabled { opacity: .5; cursor: default }
.btn.prim { background: var(--acc); border-color: var(--acc); color: var(--acc-txt); font-weight: 600 }
.btn.prim:hover { filter: brightness(1.05) }
.btn.danger { color: var(--ko) }
.btn.lien { border: 0; background: none; padding: 4px 6px; color: var(--mut) }
input, select, textarea { font: inherit; color: var(--txt); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; min-width: 0 }
textarea { resize: vertical; min-height: 64px }
input[type=checkbox] { width: auto; accent-color: var(--acc) }
input[type=color] { padding: 2px; height: 38px; width: 60px }
label { display: grid; gap: 5px; font-size: 13px; color: var(--mut) }
label.case { display: flex; align-items: center; gap: 8px; color: var(--txt) }
.champs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) }
.aide { font-size: 12px; color: var(--mut) }

.carte { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px }
.carte + .carte { margin-top: 14px }
.onglets { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line) }
.onglets button { border: 0; background: none; font: inherit; padding: 8px 12px; color: var(--mut); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px }
.onglets button[aria-selected="true"] { color: var(--txt); border-color: var(--acc); font-weight: 600 }
.pied { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 14px }
.alerte { border-radius: 10px; padding: 10px 12px; background: var(--warm-bg); color: var(--warm); font-size: 13px }
.alerte.ko { background: var(--hot-bg); color: var(--hot) }

/* Liste des campagnes */
.grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-top: 14px }
.camp { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px }
.camp:hover { border-color: var(--mut) }
.camp h3 { font-size: 15px; margin-bottom: 3px }
.camp .chiffres { display: flex; gap: 12px; margin-top: 12px; font-size: 13px; flex-wrap: wrap }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--chip); color: var(--mut); text-transform: uppercase; letter-spacing: .03em }
.badge.en_cours, .badge.en_attente { background: var(--warm-bg); color: var(--warm) }
.badge.termine { background: var(--ok-bg); color: var(--ok) }
.badge.erreur { background: var(--hot-bg); color: var(--hot) }
.barre { height: 6px; background: var(--chip); border-radius: 99px; overflow: hidden; margin-top: 10px }
.barre i { display: block; height: 100%; background: var(--acc); border-radius: 99px; transition: width .4s }
.vide { color: var(--mut); padding: 30px; text-align: center; border: 1px dashed var(--line); border-radius: 14px }

/* Tuiles de stats */
.tuiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px }
.tuile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px }
.tuile b { display: block; font-size: 24px; line-height: 1.1 }
.tuile span { color: var(--mut); font-size: 12px }
.tuile.chaud b { color: var(--hot) } .tuile.tiede b { color: var(--warm) } .tuile.froid b { color: var(--cold) } .tuile.rdv b { color: var(--ok) }

/* Filtres */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px }
.filtres .puce { border: 1px solid var(--line); background: var(--card); color: var(--txt); border-radius: 999px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px }
.filtres .puce[aria-pressed="true"] { background: var(--txt); color: var(--bg); border-color: var(--txt) }
.filtres select { width: auto }
.filtres input[type=search] { flex: 1; min-width: 180px; width: auto }

/* Fiche prospect */
.liste { display: grid; gap: 10px }
.pro { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; grid-template-columns: 58px minmax(0, 1fr) 200px; gap: 12px; align-items: start }
.pro.stop, .pro.perdu { opacity: .55 }
.score { border-radius: 10px; text-align: center; padding: 6px 0; font-weight: 800; font-size: 20px; background: var(--chip) }
.score small { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em }
.chaud .score { background: var(--hot-bg); color: var(--hot) } .tiede .score { background: var(--warm-bg); color: var(--warm) } .froid .score { background: var(--cold-bg); color: var(--cold) }
.nom { font-weight: 700; font-size: 15px; overflow-wrap: anywhere }
.meta { color: var(--mut); font-size: 12.5px; margin-top: 2px; display: flex; flex-wrap: wrap; gap: 3px 12px }
.meta a { color: var(--mut); overflow-wrap: anywhere }
.puces { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px }
.puce-pb { background: var(--chip); border-radius: 6px; padding: 2px 7px; font-size: 12px }
.puce-pb.critique { background: var(--hot-bg); color: var(--hot) }
.deja { margin-top: 6px; font-size: 12px; color: var(--warm) }
.cote { display: grid; gap: 6px }
.cote select { font-size: 13px; padding: 6px 8px }
.cote select[data-crm="rdv"], .cote select[data-crm="gagne"] { border-color: var(--ok); color: var(--ok) }
.cote select[data-crm="stop"] { border-color: var(--ko); color: var(--ko) }
.cote .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
details.plus { grid-column: 2 / -1 }
details.plus summary { cursor: pointer; color: var(--mut); font-size: 12.5px; list-style-position: inside }
.detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-top: 10px }
pre.mail { white-space: pre-wrap; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-family: inherit; font-size: 13px; line-height: 1.5; margin: 0 }
.maj { font-size: 11.5px; color: var(--mut) }
.encore { margin-top: 12px; text-align: center }

/* Suivi */
.section + .section { margin-top: 26px }
.section h2 { margin-bottom: 10px; display: flex; gap: 8px; align-items: baseline }
.section h2 small { color: var(--mut); font-weight: 400; font-size: 13px }
.camp-lien { font-size: 12px; color: var(--mut) }

/* Réglages */
.services { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.services li { display: flex; gap: 10px; align-items: baseline }
.services b { width: 18px; flex: none }
.services .oui { color: var(--ok) } .services .non { color: var(--ko) }
code { background: var(--chip); padding: 1px 5px; border-radius: 4px; font-size: 12.5px }

/* Connexion */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 16px }
.connexion form { width: min(380px, 100%); display: grid; gap: 14px }
.connexion .logo { font-size: 22px; justify-content: center; margin-bottom: 6px }
.connexion .logo img { width: 30px; height: 30px }

#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); background: var(--txt); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: .2s; max-width: calc(100% - 32px); z-index: 20 }
#toast.vu { opacity: 1; transform: translateX(-50%) }
#toast.ko { background: var(--ko); color: #fff }

@media (max-width: 860px) {
  .pro { grid-template-columns: 50px minmax(0, 1fr) }
  .cote { grid-column: 1 / -1; grid-template-columns: 1fr 1fr }
  .cote select { grid-column: 1 / -1 }
  details.plus { grid-column: 1 / -1 }
  .detail { grid-template-columns: 1fr }
  .tuiles { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 560px) {
  .top-in { gap: 10px }
  .logo b { display: none }
  .moi { display: none }
  .seulement-mobile { display: block }
  .tuiles { grid-template-columns: repeat(5, 1fr); gap: 6px }
  .tuile { padding: 8px 6px; text-align: center }
  .tuile b { font-size: 18px }
  .tuile span { font-size: 10.5px }
  .filtres input[type=search] { flex-basis: 100% }
}