/* CRM Carouge — feuille de style vanilla.
   Charte Camping du Lac de Carouge : jaune signature, bleu lac, vert nature, noir, blanc. */

:root {
  --jaune: #FCE304;       /* signature camping */
  --jaune-fonce: #e3cc00;
  --bleu: #1781b5;        /* lac */
  --bleu-fonce: #0f6391;
  --bleu-clair: #e3f1f8;
  --vert: #2e7d32;        /* nature / validation */
  --orange: #ef6c00;
  --rouge: #c62828;
  --violet: #6a1b9a;
  --noir: #1a1a1a;
  --bg: #f7f8f6;
  --card: #fff;
  --bord: #e2e6e3;
  --txt: #1a2229;
  --muted: #6b7782;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--txt); }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: .85em; }
.error { color: var(--rouge); }
.spacer { flex: 1; }
code { background: #f0f2f0; padding: 1px 5px; border-radius: 4px; font-size: .85em; }
a { color: var(--bleu-fonce); }

/* Connexion */
.login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bleu), var(--vert)); }
.login-box { background: #fff; padding: 32px; border-radius: 14px; width: min(360px, 90vw); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.25); border-top: 6px solid var(--jaune); }
.login-box h1 { margin: 0; color: var(--noir); }
.login-box p { margin: 0; }
.login-box input, .login-box button { padding: 12px; border-radius: 8px; border: 1px solid var(--bord); font-size: 1rem; }
.login-box button { background: var(--bleu); color: #fff; border: none; font-weight: 600; cursor: pointer; }

/* Barre du haut */
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 3px solid var(--jaune); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.marque { color: var(--noir); font-size: 1.05rem; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { padding: 8px 14px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--muted); font-size: .95rem; }
.tab.active { background: var(--jaune); color: var(--noir); font-weight: 600; }
.badge-compteur { background: var(--rouge); color: #fff; border-radius: 20px; padding: 1px 7px; font-size: .72rem; font-weight: 700; margin-left: 4px; }

main { padding: 16px; max-width: 1400px; margin: 0 auto; }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 10px; gap: 12px; flex-wrap: wrap; }
.toolbar h2 { margin: 0; font-size: 1.15rem; }
.toolbar .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.list { display: flex; flex-direction: column; gap: 8px; }

.card { background: var(--card); border: 1px solid var(--bord); border-radius: 10px; padding: 14px; display: flex; align-items: center; gap: 12px; }
.card.clickable { cursor: pointer; }
.card.clickable:hover { border-color: var(--bleu); }
.card .grow { flex: 1; min-width: 0; }

/* Tuiles du tableau de bord */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tuile { background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 16px; border-left: 5px solid var(--bleu); }
.tuile.jaune { border-left-color: var(--jaune); }
.tuile.vert { border-left-color: var(--vert); }
.tuile.orange { border-left-color: var(--orange); }
.tuile.rouge { border-left-color: var(--rouge); }
.tuile .valeur { font-size: 1.8rem; font-weight: 700; color: var(--noir); line-height: 1.1; }
.tuile .libelle { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .colonnes { grid-template-columns: 1fr; } }

/* Badges */
.badge { padding: 2px 8px; border-radius: 20px; font-size: .72rem; font-weight: 600; white-space: nowrap; display: inline-block; }
.badge.client { background: #e8f5e9; color: var(--vert); }
.badge.prospect { background: var(--bleu-clair); color: var(--bleu-fonce); }
.badge.pro { background: #f3e5f5; color: var(--violet); }
.badge.oui { background: #e8f5e9; color: var(--vert); }
.badge.non { background: #eceff1; color: var(--muted); }
.badge.nouveau { background: #eceff1; color: var(--muted); }
.badge.qualifie { background: var(--bleu-clair); color: var(--bleu-fonce); }
.badge.devis { background: #fff8e1; color: #a67c00; }
.badge.relance { background: #fff3e0; color: var(--orange); }
.badge.gagne { background: #e8f5e9; color: var(--vert); }
.badge.perdu { background: #ffebee; color: var(--rouge); }
.badge.retard { background: var(--rouge); color: #fff; }
.badge.systeme { background: #eceff1; color: var(--muted); }

/* Boutons */
.btn-primary { background: var(--bleu); color: #fff; border: none; padding: 9px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn-primary:hover { background: var(--bleu-fonce); }
.btn-ghost { background: transparent; border: 1px solid var(--bord); padding: 8px 12px; border-radius: 8px; cursor: pointer; text-decoration: none; color: var(--txt); display: inline-block; background: #fff; }
.btn-ghost:hover { border-color: var(--bleu); }
.btn-success { background: var(--vert); color: #fff; border: none; padding: 9px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn-danger { background: transparent; border: 1px solid var(--rouge); color: var(--rouge); padding: 7px 11px; border-radius: 8px; cursor: pointer; }
.petit { padding: 5px 10px; font-size: .85rem; }

/* Filtres & champs */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.chip { padding: 6px 12px; border: 1px solid var(--bord); border-radius: 20px; background: #fff; cursor: pointer; font-size: .85rem; }
.chip.active { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.champ-recherche { padding: 9px 12px; border: 1px solid var(--bord); border-radius: 8px; min-width: 260px; font-size: .95rem; }
.champ-select { padding: 9px 10px; border: 1px solid var(--bord); border-radius: 8px; background: #fff; font-size: .9rem; }

/* Tableau */
.tableau-conteneur { background: #fff; border: 1px solid var(--bord); border-radius: 10px; overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau th { text-align: left; padding: 11px 12px; background: #fafbfa; border-bottom: 1px solid var(--bord); color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.tableau td { padding: 11px 12px; border-bottom: 1px solid #f0f2f0; }
.tableau tbody tr { cursor: pointer; }
.tableau tbody tr:hover { background: #fafcfd; }
.tableau .nom-principal { font-weight: 600; color: var(--noir); }
.pagination { display: flex; gap: 8px; justify-content: center; margin: 14px 0; }

/* Fiche client */
.detail-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.detail-header h2 { margin: 0; font-size: 1.3rem; }
.detail-block { background: #fff; border: 1px solid var(--bord); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.detail-block h3 { margin: 0 0 12px; font-size: 1rem; color: var(--bleu); }
.fiche-grille { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .fiche-grille { grid-template-columns: 1fr; } }
.kv { display: flex; gap: 8px; margin: 6px 0; font-size: .9rem; align-items: baseline; }
.kv b { min-width: 105px; color: var(--muted); font-weight: 600; flex-shrink: 0; }
.kv .valeur-editable { flex: 1; cursor: text; border-bottom: 1px dashed transparent; }
.kv .valeur-editable:hover { border-bottom-color: var(--bord); }
.stats-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: #fafbfa; border-radius: 8px; padding: 10px; }
.stat .v { font-size: 1.25rem; font-weight: 700; color: var(--noir); }
.stat .l { font-size: .75rem; color: var(--muted); }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 2px; max-height: 520px; overflow-y: auto; }
.evenement { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #f0f2f0; }
.evenement:first-child { border-top: none; }
.evenement .puce { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bleu-clair); font-size: .9rem; }
.evenement .contenu { flex: 1; min-width: 0; }
.evenement .titre { font-weight: 600; font-size: .9rem; }
.evenement .meta { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.evenement .texte { font-size: .87rem; margin-top: 4px; color: #38434d; word-wrap: break-word; }
.form-note { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.form-note input[type="text"] { flex: 1; min-width: 200px; padding: 9px 12px; border: 1px solid var(--bord); border-radius: 8px; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(200px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
@media (max-width: 1200px) { .kanban { grid-template-columns: repeat(6, 220px); } }
.colonne-kanban { background: #f0f2f0; border-radius: 10px; padding: 10px; min-height: 200px; }
.colonne-kanban.survol { background: var(--bleu-clair); outline: 2px dashed var(--bleu); }
.colonne-kanban h4 { margin: 0 0 4px; font-size: .85rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.colonne-kanban .total { font-size: .78rem; color: var(--muted); margin-bottom: 10px; }
.carte-oppo { background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 10px; margin-bottom: 8px; cursor: grab; font-size: .87rem; }
.carte-oppo:hover { border-color: var(--bleu); }
.carte-oppo .titre { font-weight: 600; margin-bottom: 4px; }
.carte-oppo .meta { color: var(--muted); font-size: .78rem; }
.carte-oppo .montant { color: var(--vert); font-weight: 600; }
.carte-oppo.retard { border-left: 3px solid var(--rouge); }

/* Segments */
.segment-regles { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.regle { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.regle select, .regle input { padding: 7px 9px; border: 1px solid var(--bord); border-radius: 7px; font-size: .87rem; }
.regle .btn-danger { padding: 4px 9px; }

/* Modale */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal { background: #fff; border-radius: 12px; padding: 22px; width: min(560px, 95vw); max-height: 90vh; overflow: auto; }
.modal.large { width: min(820px, 95vw); }
.modal h3 { margin-top: 0; }
.modal label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: .88rem; }
.modal input, .modal select, .modal textarea { width: 100%; padding: 10px; border: 1px solid var(--bord); border-radius: 8px; font-size: .95rem; font-family: inherit; }
.modal textarea { min-height: 90px; resize: vertical; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 600px) { .grille-2 { grid-template-columns: 1fr; } }

/* Formulaires en ligne (réglages) */
.form-inline { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.form-inline input { padding: 9px 12px; border: 1px solid var(--bord); border-radius: 8px; flex: 1; min-width: 150px; }
.cle-nouvelle { background: #fff8e1; border: 1px solid var(--jaune-fonce); border-radius: 8px; padding: 12px; font-family: monospace; word-break: break-all; font-size: .85rem; }

/* Connecteurs */
.connecteur { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #f0f2f0; flex-wrap: wrap; }
.connecteur:first-child { border-top: none; }
/* Secret SORTANT d'un connecteur : rattaché visuellement à sa ligne, décalé
   pour qu'on ne le confonde pas avec la section « Clés d'API » plus bas, qui
   va dans l'autre sens (clés émises PAR le CRM). */
.connecteur-jeton { padding: 0 0 12px 22px; display: flex; flex-direction: column; gap: 6px; }
.connecteur-jeton input { min-width: 260px; }
.pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.pastille.ok { background: var(--vert); }
.pastille.erreur { background: var(--rouge); }
.pastille.inactif { background: #cfd8dc; }

/* Supervision des flux.
   Trois familles de couleur, et une seule question : faut-il agir ?
   rouge = la chaîne est cassée · orange = à surveiller · gris = rien n'est attendu. */
.pastille.vide,
.pastille.injoignable,
.pastille.en_retard { background: var(--rouge); }
.pastille.partiel,
.pastille.degrade { background: var(--orange); }
.pastille.jamais { background: #cfd8dc; }
.pastille.hors_saison,
.pastille.hors_creneau { background: #b0bec5; }

.verdict { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 10px; margin-bottom: 16px; border: 1px solid var(--bord); border-left: 5px solid var(--vert); background: #fff; }
.verdict.alerte { border-left-color: var(--rouge); background: #fff8f8; }
.verdict .texte { font-weight: 600; }
.verdict .icone { font-size: 1.2rem; line-height: 1; }

.flux { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid #f0f2f0; flex-wrap: wrap; }
.flux:first-child { border-top: none; }
.flux .nom { font-weight: 600; min-width: 210px; }
.flux .explication { color: var(--muted); font-size: .84rem; }
.flux .volume { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* Toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--noir); color: #fff; padding: 12px 20px; border-radius: 8px; z-index: 200; font-size: .9rem; box-shadow: 0 6px 20px rgba(0,0,0,.3); max-width: 90vw; }
.toast.erreur { background: var(--rouge); }
.toast.succes { background: var(--vert); }