:root{
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#1f2430;
  --muted:#8a93a6;
  --green:#22c55e;
  --red:#ef4444;
  --amber:#f59e0b;
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
#app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
/* Écran Tableau de bord (admin, ordinateur) : demande de Jonathan 17/08,
   le cadre mobile 480px coupait les colonnes du tableau. On élargit #app
   uniquement quand la classe .wide-screen est posée (par app.js, sur cet
   écran précis) ET seulement sur un écran assez large pour en profiter —
   sur un vrai téléphone (< 700px de large) la media query ne s'applique
   jamais, donc ça n'a aucun effet sur l'usage mobile des agents. */
@media (min-width:700px){
  #app.wide-screen{max-width:1200px;}
  #app.wide-screen .stats-grid{grid-template-columns:repeat(3,1fr);}
}
.screen{
  flex:1;
  display:none;
  flex-direction:column;
  padding:24px;
  animation:fadeIn .18s ease;
}
.screen.active{display:flex;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ---- Login ---- */
#screen-login{justify-content:center;}
.login-card{
  background:var(--card);
  border-radius:20px;
  padding:32px 24px;
  box-shadow:0 8px 30px rgba(30,40,80,.08);
}
/* 31/08/2026 : le logo Batinova remplace le rond bleu.
   Pas de cadre : la carte de connexion est déjà blanche, un carré blanc
   dessus ne se voyait pas et bridait le logo, qui est plus large que
   haut. Il est donc affiché seul, en grand. */
.login-logo{
  width:auto;height:auto;border-radius:0;
  background:none;box-shadow:none;overflow:visible;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px auto;
}
.login-logo img{width:170px;height:auto;max-width:60%;display:block;}
.login-logo svg{width:28px;height:28px;fill:white;}
.login-title{text-align:center;font-size:20px;font-weight:700;margin:0 0 4px 0;}
.login-sub{text-align:center;font-size:13px;color:var(--muted);margin:0 0 24px 0;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600;}
.field input{
  width:100%;padding:13px 14px;border-radius:12px;border:1px solid #e3e7ef;
  font-size:15px;background:#fafbfd;outline:none;transition:border-color .15s;
}
.field input:focus{border-color:var(--blue);background:white;}
.btn{
  width:100%;padding:14px;border-radius:12px;border:none;
  font-size:15px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .08s, opacity .15s;
}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.6;cursor:default;}
.btn-primary{background:var(--blue);color:white;margin-top:6px;}
.btn-primary:hover{background:var(--blue-dark);}
.divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--muted);font-size:12px;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:#e6e9f0;}
.btn-google{background:white;color:var(--text);border:1px solid #e3e7ef;}
.login-foot{text-align:center;font-size:12px;color:var(--muted);margin-top:18px;}
.login-error{
  background:#fef2f2;color:#b91c1c;font-size:13px;padding:10px 14px;
  border-radius:10px;margin-bottom:14px;display:none;
}
.login-error.show{display:block;}

/* ---- Header shared ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 8px 20px;
}
.topbar .icon-btn{
  width:38px;height:38px;border-radius:10px;background:white;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(30,40,80,.06);cursor:pointer;color:var(--muted);
  font-size:16px;
}
.topbar .title{font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;}

/* ---- Profile / Home ---- */
#screen-home{padding:0 0 24px 0;}
.profile-hero{text-align:center;padding:6px 24px 20px 24px;}
.avatar{
  width:74px;height:74px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),#60a5fa);
  color:white;font-size:28px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin:6px auto 12px auto;
  box-shadow:0 8px 20px rgba(37,99,235,.3);
}
.profile-name{font-size:22px;font-weight:800;margin:0;}
/* Ligne d'identité compacte de l'accueil (30/08/2026, 2e version) :
   Jonathan veut le bouton d'appel tout de suite, pas après un bandeau
   qui occupe le tiers de l'écran. Même information, sur une ligne. */
.profile-line{display:flex;align-items:center;gap:12px;padding:2px 20px 6px 20px;}
.profile-line .profile-name{font-size:17px;line-height:1.2;}
.profile-line .profile-role{font-size:12px;margin-top:0;}
.avatar-mini{width:38px;height:38px;font-size:16px;margin:0;box-shadow:0 4px 10px rgba(37,99,235,.25);flex:0 0 auto;}
.profile-role{font-size:13px;color:var(--muted);margin-top:2px;}

.call-btn-wrap{padding:4px 24px 12px 24px;text-align:center;}
.call-btn{
  width:96px;height:96px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),#3b82f6);
  border:none;color:white;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px auto;cursor:pointer;
  box-shadow:0 10px 24px rgba(37,99,235,.4);
  transition:transform .08s;
}
.call-btn:active{transform:scale(.94);}
.call-btn svg{width:34px;height:34px;fill:white;}
.call-label{font-size:13px;font-weight:700;color:var(--blue-dark);letter-spacing:.3px;}

.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 20px;margin-top:10px;}
.stat-card{background:var(--card);border-radius:16px;padding:16px;box-shadow:0 3px 14px rgba(30,40,80,.05);}
.stat-emoji{font-size:18px;}
.stat-label{font-size:11px;color:var(--muted);font-weight:700;margin-top:6px;letter-spacing:.2px;}
.stat-value{font-size:24px;font-weight:800;margin-top:2px;}

/* ---- Menu (Mes résultats / Mon suivi) ---- */
.menu-row{display:flex;gap:8px;padding:14px 20px 0 20px;flex-wrap:wrap;}
.menu-tab{
  flex:1 1 auto;min-width:104px;padding:10px 8px;border-radius:12px;border:1px solid #e3e7ef;
  background:white;color:var(--blue-dark);font-weight:700;font-size:13px;
  cursor:pointer;transition:transform .08s;
}
.menu-tab:active{transform:scale(.97);}

/* ---- Tableau de bord de l'admin (30/08/2026) ----
   L'accueil de Jonathan n'est plus une liste de 13 onglets : un titre,
   son prénom, trois accès quotidiens, trois catégories, ses chiffres.
   L'accueil des agents (#home-agent) n'utilise aucune de ces classes :
   il reste exactement ce qu'il était. */
.page-titre{
  font-size:12px;font-weight:800;color:var(--muted);letter-spacing:1.4px;
  text-transform:uppercase;padding:6px 20px 0 20px;margin:0;
}
.hello{font-size:26px;font-weight:800;padding:2px 20px 0 20px;margin:0;letter-spacing:-.3px;}
.hello small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0;margin-top:2px;}

/* Retour de la synchro déclenchée par la roue crantée (31/08/2026). */
.sync-etat{font-size:12px;font-weight:700;color:var(--blue-dark);padding:6px 20px 0 20px;margin:0;}
.sync-etat.ok{color:var(--green);}
.sync-etat.err{color:var(--red);}
#sync-sheet-btn.tourne{animation:tourneRoue 1.1s linear infinite;}
@keyframes tourneRoue{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* Bouton pleine largeur, titre + explication, chevron à droite. */
.menu-col{display:flex;flex-direction:column;gap:10px;padding:16px 20px 4px 20px;}
.gros-btn{
  width:100%;background:#fff;border:1px solid #e9edf5;border-radius:14px;
  padding:14px 16px;font-size:15px;font-weight:700;color:var(--blue-dark);
  display:flex;justify-content:space-between;align-items:center;text-align:left;
  box-shadow:0 2px 10px rgba(30,40,80,.04);cursor:pointer;transition:transform .08s;
  font-family:inherit;
}
.gros-btn:active{transform:scale(.985);}
.gros-btn .fl{color:#c9d0dd;font-weight:400;font-size:18px;}
.gros-btn .desc{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:3px;}
/* 20/09/2026 : deux gros boutons côte à côte (Simulation + Guidage d'appel). */
.duo-btn{display:flex;gap:10px;}
.duo-btn .gros-btn{flex:1 1 0;min-width:0;}

/* Les trois catégories. */
/* 31/08/2026 : quatre catégories depuis que « Visites techniques » en est
   une. Deux par rangée sur téléphone — quatre carrés serrés sur 360 px
   couperaient les libellés — et les quatre sur une seule ligne dès qu'il
   y a la largeur. */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 20px 0 20px;}
@media (min-width:560px){ .cat-grid{grid-template-columns:repeat(4,1fr);} }
.cat{
  background:#fff;border:1px solid #e9edf5;border-radius:16px;padding:14px 10px 12px 10px;
  text-align:center;box-shadow:0 2px 10px rgba(30,40,80,.04);cursor:pointer;
  transition:transform .08s;font-family:inherit;color:var(--text);
}
.cat:active{transform:scale(.97);}
.cat .ico{font-size:23px;display:block;}
.cat .nom{font-size:12.5px;font-weight:800;margin-top:8px;line-height:1.25;display:block;}

/* ---- Accueil réorganisé en sections (30/08/2026) ----
   Quatre blocs — Mon tableau de bord / Prospection / Compta et
   administratif / Réglages — au lieu des 13 boutons alignés sans
   hiérarchie. Chaque bloc est visuellement détaché du suivant par un
   filet clair, et porte un titre discret. Les sections réservées à
   l'admin sont masquées par défaut en HTML et révélées par le gating
   dans app.js ; majSectionsAccueil_() cache le titre d'une section qui
   n'aurait aucun bouton visible. */
.accueil-section{padding-bottom:14px;margin-bottom:2px;border-bottom:1px solid #edf0f6;}
.accueil-section:last-of-type{border-bottom:0;}
.accueil-titre{
  font-size:11px;font-weight:800;color:var(--muted);letter-spacing:1px;
  text-transform:uppercase;padding:16px 20px 2px 20px;margin:0;
}
/* Bouton mis en avant (Simulation) : Jonathan l'ouvre plusieurs fois
   par jour, il ne doit pas se confondre avec les autres. */
.menu-tab-fort{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff;}
/* Boutons ouverts une fois par mois : présents, mais en retrait. */
.menu-tab-discret{background:transparent;border-style:dashed;color:var(--muted);font-weight:600;}

/* ---- Stats du jour ---- */
.section-title{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;padding:18px 20px 0 20px;margin:0;}
.stats-grid-today{grid-template-columns:repeat(5,1fr);gap:8px;}
.stat-card.today{padding:8px 4px;text-align:center;}
.stat-card.today .stat-value{font-size:16px;}
.stat-card.today .stat-label{font-size:8px;}

/* ---- Filtre par date ---- */
.filter-row{display:flex;gap:8px;padding:14px 20px 4px 20px;overflow-x:auto;}
.filter-chip{
  flex-shrink:0;padding:8px 14px;border-radius:20px;border:1px solid #e3e7ef;
  background:white;color:var(--muted);font-weight:700;font-size:12px;cursor:pointer;
}
.filter-chip.active{background:var(--blue);border-color:var(--blue);color:white;}

/* ---- Sélecteur date début / date fin (Mes résultats, Mon suivi) ----
   Remplace l'ancien filtre par période (7j/30j/tout) — demande de
   Jonathan 17/08. */
.date-range-row{display:flex;gap:10px;padding:14px 20px 4px 20px;}
.date-range-field{flex:1;}
.date-range-field label{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:4px;text-transform:uppercase;}
.date-range-field input[type="date"],.date-range-field select{
  width:100%;padding:10px 10px;border-radius:10px;border:1px solid #e3e7ef;
  font-size:13px;font-family:inherit;background:white;color:var(--text);
}
/* Tableau de bord : rangée date+agent plus large que 2 champs (Mes
   résultats/Mon suivi), donc pas de flex:1 uniforme — le champ agent
   prend plus de place que les 2 dates. */
.date-range-row[data-target="dashboard"] .date-range-field:nth-child(3){flex:1.4;}
.stats-grid-3{grid-template-columns:repeat(3,1fr);}
.resultats-note{font-size:11px;color:var(--muted);padding:12px 20px 4px 20px;line-height:1.4;}
.commission-total-card{
  margin:14px 20px 0 20px;background:var(--card);border-radius:16px;padding:18px 20px;
  text-align:center;box-shadow:0 3px 14px rgba(30,40,80,.05);
}
.commission-total-card .k{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.commission-total-card .v{font-size:26px;font-weight:800;color:var(--blue-dark);margin-top:6px;}

/* ---- Gestion administrative (Tableau de bord) ---- */
.dash-admin-cell{display:flex;flex-direction:column;gap:6px;min-width:150px;}
.dash-admin-badge{
  display:inline-block;padding:4px 10px;border-radius:10px;font-size:11px;font-weight:700;
  color:white;cursor:pointer;width:fit-content;
}
.dash-admin-badge.ok{background:var(--green);}
.dash-admin-badge.ko{background:var(--red);}
.dash-admin-checks{display:none;flex-direction:column;gap:3px;}
.dash-admin-cell.expanded .dash-admin-checks{display:flex;}
.dash-admin-check-row{
  font-size:11px;color:var(--text);display:flex;align-items:center;gap:5px;
  font-weight:500;white-space:nowrap;
}
.dash-admin-check-row input{width:auto;margin:0;}

/* ---- Mes résultats : liste ---- */
.list-wrap{padding:10px 20px 20px 20px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;}
.list-empty{text-align:center;color:var(--muted);font-size:13px;margin-top:30px;}
.result-row{
  background:var(--card);border-radius:14px;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  box-shadow:0 3px 14px rgba(30,40,80,.05);
}
.result-phone{font-weight:700;font-size:14px;}
.result-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.result-gestion{font-size:11px;color:var(--muted);margin-top:3px;font-style:italic;}
.result-badge{
  flex-shrink:0;padding:6px 10px;border-radius:10px;color:white;
  font-size:11px;font-weight:700;white-space:nowrap;
}

/* ---- Mon suivi ---- */
.suivi-summary{display:flex;gap:12px;padding:10px 20px;}
.suivi-big{
  flex:1;background:var(--card);border-radius:16px;padding:18px 12px;text-align:center;
  box-shadow:0 3px 14px rgba(30,40,80,.05);
}
.suivi-big-value{font-size:26px;font-weight:800;color:var(--blue-dark);}
.suivi-big-label{font-size:11px;color:var(--muted);font-weight:700;margin-top:4px;}

/* ---- Searching ---- */
#screen-searching{align-items:center;justify-content:center;text-align:center;}
.spinner{
  width:46px;height:46px;border-radius:50%;
  border:4px solid #dbe4fb;border-top-color:var(--blue);
  animation:spin .7s linear infinite;margin-bottom:18px;
}
@keyframes spin{to{transform:rotate(360deg);}}
.searching-text{font-weight:700;font-size:15px;}
.lead-ready{display:flex;flex-direction:column;align-items:center;}
.lead-ready-icon{
  width:64px;height:64px;border-radius:50%;background:#e9fbef;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:28px;
}
.lead-ready-title{font-weight:800;font-size:17px;margin-bottom:18px;}
.btn-text{
  background:none;border:none;color:var(--muted);font-size:13px;font-weight:700;
  margin-top:26px;cursor:pointer;padding:8px;
}
.searching-sub{font-size:12px;color:var(--muted);margin-top:6px;}

/* ---- Lead card ---- */
#screen-lead{padding:16px 18px 20px 18px;}
.lead-card{
  background:var(--card);border-radius:20px;padding:22px;
  box-shadow:0 8px 24px rgba(30,40,80,.07);
  flex:1;display:flex;flex-direction:column;
}
.lead-name{font-size:22px;font-weight:800;}
.lead-badge{
  display:inline-block;background:#eef2ff;color:var(--blue-dark);
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;
  margin-top:6px;
}
.call-lead-wrap{margin-top:16px;text-align:center;}
.btn-call{
  width:auto;padding:12px 28px;margin:0 auto;background:var(--green);color:white;
}
.btn-call:hover{background:#16a34a;}
/* Réservation d'une fiche ouverte depuis la recherche (30/08/2026,
   admin uniquement). Deux états : bleu pour prendre, discret pour rendre. */
.btn-reserver{width:auto;margin:12px auto 0;padding:11px 22px;background:var(--blue);color:#fff;}
.btn-reserver.rendre{background:#fff;color:var(--muted);border:1px solid #e3e7ef;font-size:13px;padding:9px 18px;}

/* Les deux boutons de contact, côte à côte (30/08/2026, admin seulement).
   Sans la classe .duo posée par app.js, cette rangée n'a aucun effet :
   l'agent garde son unique bouton vert centré, au pixel près. */
.contact-row{display:flex;justify-content:center;}
.contact-row.duo{gap:10px;max-width:330px;margin:0 auto;}
.contact-row.duo .btn{flex:1 1 0;width:auto;padding:12px 10px;margin:0;}
/* Inversion demandée par Jonathan : c'est "Contacter" qui doit sauter aux
   yeux, Twilio passe en second plan. */
.contact-row.duo .btn-call{background:#fff;color:var(--blue-dark);border:1px solid #dbe1ec;}
.contact-row.duo .btn-call:hover{background:#f7f9fc;}
.btn-contact-vert{
  background:var(--green);color:#fff;font-weight:700;text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.btn-contact-vert:hover{background:#16a34a;}
.contact-hint{font-size:11px;color:var(--muted);margin:7px 0 0;text-align:center;}
.call-status{font-size:12px;font-weight:700;color:var(--muted);margin:8px 0 0 0;min-height:14px;}
.call-status.ok{color:var(--green);}
.call-status.err{color:var(--red);}

.lead-info{margin-top:18px;display:flex;flex-direction:column;gap:12px;}
.lead-info-row{display:flex;align-items:center;gap:12px;}
.lead-info-icon{
  width:34px;height:34px;border-radius:9px;background:#f2f4f9;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.lead-info-text .k{font-size:11px;color:var(--muted);font-weight:600;}
.lead-info-text .v{font-size:14px;font-weight:600;}

.lead-comment-field{margin-top:18px;margin-bottom:0;position:relative;}
.comment-saved{
  font-size:11px;color:var(--green);font-weight:700;margin:4px 0 0 0;
  opacity:0;transition:opacity .2s;
}
.comment-saved.show{opacity:1;}

.qual-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;}
.qual-btn{
  padding:14px 8px;border-radius:14px;border:none;font-size:13px;font-weight:700;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .08s;color:white;
}
.qual-btn:active{transform:scale(.95);}
.qual-btn:disabled{opacity:.5;}
.qual-btn .e{font-size:18px;}
.q-rdv{background:var(--green);}
.q-nrp{background:var(--amber);}
.q-refus{background:var(--red);}
.q-devis{background:var(--blue);}
.q-rappel{background:#8b5cf6;}

/* ---- Modal qualification (champs complémentaires) ---- */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(20,24,40,.45);
  align-items:flex-end;justify-content:center;z-index:50;
}
.modal-overlay.show{display:flex;}
.modal-card{
  width:100%;max-width:480px;background:var(--card);
  border-radius:20px 20px 0 0;padding:22px 22px 28px 22px;
  box-shadow:0 -8px 30px rgba(30,40,80,.15);
  max-height:85vh;overflow-y:auto;
}
.modal-title{font-size:17px;font-weight:800;margin:0 0 16px 0;}
.field textarea{
  width:100%;padding:13px 14px;border-radius:12px;border:1px solid #e3e7ef;
  font-size:15px;background:#fafbfd;outline:none;transition:border-color .15s;
  font-family:inherit;resize:vertical;
}
.field textarea:focus{border-color:var(--blue);background:white;}
.field select{
  width:100%;padding:13px 14px;border-radius:12px;border:1px solid #e3e7ef;
  font-size:15px;background:#fafbfd;outline:none;font-family:inherit;
}
.tva-autre-input{margin-top:6px;}
.line-item-fields .tva-field .tva-autre-input{margin-top:6px;}
.modal-error{
  color:#b91c1c;font-size:13px;margin:0 0 10px 0;min-height:0;
}
.modal-error:empty{margin:0;}
.modal-error.modal-success{color:#16a34a;font-weight:700;}

/* ---- Bouton Simulation ---- */
.btn-sim{
  margin-top:10px;background:white;color:var(--blue-dark);border:1px solid #e3e7ef;
  border-radius:12px;padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:transform .08s;
}
.btn-sim:active{transform:scale(.96);}
.btn-sim-lead{display:block;margin:14px auto 0 auto;}

/* ---- Overlay Simulation (simulateur intégré, plein écran, au-dessus de tout) ---- */
.sim-overlay{
  display:none;position:fixed;inset:0;background:#0f1419;
  z-index:80;flex-direction:column;
}
.sim-overlay.show{display:flex;}
.sim-overlay-bar{
  flex:0 0 auto;background:#1a2128;border-bottom:1px solid #2e3945;
  padding:10px 14px;display:flex;justify-content:flex-end;
}
.sim-close-btn{
  background:#222b34;color:#e6edf3;border:1px solid #2e3945;
  border-radius:10px;padding:9px 16px;font-size:13px;font-weight:700;
  cursor:pointer;
}
.sim-close-btn:active{transform:scale(.96);}
.sim-frame{
  flex:1 1 auto;width:100%;border:0;background:#0f1419;
}

/* ---- Tableau de bord (admin) ---- */
.dash-agents{
  padding:10px 20px 4px 20px;display:flex;flex-direction:column;gap:6px;
}
.dash-agent-row{
  background:var(--card);border-radius:12px;padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;box-shadow:0 3px 14px rgba(30,40,80,.05);
}
.dash-agent-name{font-weight:700;}
.dash-agent-meta{color:var(--muted);}
.dash-row{
  background:var(--card);border-radius:14px;padding:14px 16px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  box-shadow:0 3px 14px rgba(30,40,80,.05);
}
.dash-row-name{font-weight:700;font-size:14px;}
.dash-row-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.dash-row-agent{font-size:11px;color:var(--muted);margin-top:6px;}
.dash-row-rdv{font-size:12px;color:var(--blue-dark);font-weight:600;margin-top:4px;}
.dash-row-comment{font-size:12px;color:var(--text);margin-top:6px;font-style:italic;}
.dash-row-side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.dash-rec-link{
  font-size:11px;font-weight:700;color:var(--blue-dark);text-decoration:none;
  background:#eaf1ff;border-radius:8px;padding:5px 9px;white-space:nowrap;
}

/* Vue tableau du tableau de bord (demande de Jonathan 17/08 : une vraie
   activité façon Google Sheets — prospect / statut / date / heure /
   qualifié par / enregistrement — triable par colonne, plutôt que la
   liste de cartes empilées d'origine). */
.dash-table-wrap{
  margin:10px 20px 20px 20px;overflow-x:auto;border-radius:14px;
  box-shadow:0 3px 14px rgba(30,40,80,.05);background:var(--card);
}
.dash-table{
  width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap;
}
.dash-table thead th{
  position:sticky;top:0;background:#f4f6fa;color:var(--muted);
  text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;padding:10px 12px;border-bottom:1px solid #e3e7ef;
  cursor:default;user-select:none;
}
.dash-table thead th[data-sort]{cursor:pointer;}
.dash-table thead th[data-sort]:hover{color:var(--blue-dark);}
.dash-sort-arrow{margin-left:3px;color:var(--blue-dark);}
.dash-table tbody td{
  padding:10px 12px;border-bottom:1px solid #eef1f6;vertical-align:top;
}
.dash-table tbody tr:last-child td{border-bottom:none;}
.dash-table tbody tr:nth-child(even){background:#fafbfd;}
.dash-table tbody tr:hover{background:#eef4ff;}
.dash-table .list-empty{white-space:normal;text-align:center;padding:24px 12px;}
.dash-suivi-select{
  padding:6px 6px;border-radius:8px;border:1px solid #e3e7ef;
  font-size:11px;background:#fafbfd;font-family:inherit;max-width:120px;
}
.dash-td-prospect{white-space:normal;min-width:160px;}

/* ---- Clients (admin) ---- */
.client-search-row{display:flex;gap:8px;padding:14px 20px 0 20px;}
.client-search-row input{
  flex:1;padding:12px 14px;border-radius:12px;border:1px solid #e3e7ef;
  font-size:14px;background:#fafbfd;outline:none;
}
.client-search-row input:focus{border-color:var(--blue);background:white;}
.client-card{
  background:var(--card);border-radius:16px;padding:16px;
  box-shadow:0 3px 14px rgba(30,40,80,.05);
}
.client-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;cursor:pointer;}
.client-card-badges{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.client-edit-hint{font-size:10px;color:var(--muted);font-weight:700;}
.client-card-name{font-weight:800;font-size:15px;}
.client-card-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.client-card-contact{font-size:12px;color:var(--blue-dark);margin-top:6px;font-weight:600;}
.client-money-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
  margin-top:12px;padding-top:12px;border-top:1px solid #eef0f5;
}
.client-money-cell{text-align:center;}
.client-money-cell .k{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;}
.client-money-cell .v{font-size:13px;font-weight:800;margin-top:2px;}
.client-money-cell .v.neg{color:var(--red);}
.client-status-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-top:12px;padding-top:12px;border-top:1px solid #eef0f5;
}
.client-status-cell label{display:block;font-size:10px;color:var(--muted);font-weight:700;margin-bottom:4px;text-transform:uppercase;}
.client-status-cell select{
  width:100%;padding:8px 8px;border-radius:8px;border:1px solid #e3e7ef;
  font-size:11px;background:#fafbfd;font-family:inherit;
}

/* ---- Modal Nouveau client ---- */
.client-section-title{
  font-size:11px;font-weight:800;color:var(--blue-dark);text-transform:uppercase;
  letter-spacing:.3px;margin:18px 0 10px 0;display:flex;align-items:center;justify-content:space-between;
}
.client-section-title:first-of-type{margin-top:4px;}
.cost-mode-toggle{display:flex;gap:14px;margin-bottom:14px;}
.cost-mode-toggle label{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:5px;}
.switch-label{font-size:11px;color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:5px;}
/* Pastille d'alerte (31/08/2026) — le nombre de choses en retard ou à
   faire aujourd'hui, posé sur le bouton « Ce qui m'attend ». Rouge, ronde,
   assez grosse pour se voir d'un coup d'œil sans écraser le libellé. */
.pastille{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 7px;margin-left:auto;margin-right:8px;
  border-radius:999px;background:var(--red);color:#fff;
  font-size:13px;font-weight:800;line-height:1;
}
/* Bleue quand rien n'est en retard : ça attend, mais ça ne brûle pas. */
.pastille.calme{background:var(--blue);}
/* Sur un téléphone étroit, l'étiquette « Tâche » mangeait la place du
   texte : les trois boutons (fait / mémo / supprimer) suffisent à dire
   que c'est une tâche. Les étiquettes Rappel et RDV, elles, restent. */
@media (max-width:520px){ .result-row .badge-tache{display:none;} }
/* Mémo vocal (31/08/2026) — le bouton passe au rouge pendant
   l'enregistrement, avec un léger battement : impossible de croire qu'on
   a arrêté alors que ça tourne encore. */
.memo-btn{border:1px solid #e3e7ef;}
.memo-btn.enregistre{background:var(--red)!important;color:#fff!important;border-color:var(--red);
  animation:memo-bat 1.1s ease-in-out infinite;}
@keyframes memo-bat{0%,100%{opacity:1}50%{opacity:.72}}
.memo-ligne audio{display:block;}
.field-row{display:flex;gap:10px;}
.field-row .field{flex:1;}
.client-recap{
  background:#f4f6fb;border-radius:14px;padding:14px 16px;margin-top:18px;
}
.client-recap-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:4px 0;}
.client-recap-row span{color:var(--muted);}
.client-recap-final{border-top:1px solid #e3e7ef;margin-top:4px;padding-top:8px;font-size:14px;}
.client-recap-final b{color:var(--blue-dark);}
/* 09/09/2026 — precision discrete a cote d'un libelle du recapitulatif
   ("ce qui rentre sur le compte", "apres remboursement de la TVA"), pour
   qu'on sache lequel des deux chiffres regarder sans avoir a le demander. */
.recap-hint{display:block;font-style:normal;font-size:11px;opacity:.7;line-height:1.3;}
.section-hint{font-size:10px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:600;}
.zone-readout{
  padding:11px 14px;border-radius:12px;border:1px solid #e3e7ef;background:#f4f6fb;
  font-size:14px;font-weight:700;color:var(--blue-dark);
}
.recalc-btn{
  background:none;border:none;color:var(--blue);font-size:13px;font-weight:800;
  cursor:pointer;padding:0 0 0 4px;line-height:1;vertical-align:middle;
}
.recalc-btn:active{transform:scale(.9);}
.btn-add-line{
  width:100%;padding:10px;border-radius:12px;border:1.5px dashed #c7cfe0;background:#fafbfd;
  color:var(--blue);font-size:12px;font-weight:700;cursor:pointer;margin-bottom:16px;
}
.btn-add-line:hover{background:#eef2fb;}
.line-item{
  background:#f8f9fc;border:1px solid #eef0f5;border-radius:12px;padding:12px;margin-bottom:8px;
}
.line-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.line-item-origin{display:flex;gap:10px;}
.line-item-origin label{font-size:11px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:4px;}
.line-item-badge{
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;
  padding:3px 7px;border-radius:6px;background:#e3e7ef;color:var(--muted);
}
.line-item-badge.catalogue{background:#dbeafe;color:var(--blue-dark);}
.line-item-remove{
  background:none;border:none;color:var(--red);font-size:16px;font-weight:800;cursor:pointer;
  line-height:1;padding:2px 4px;
}
.line-item-fields{display:flex;flex-wrap:wrap;gap:8px;}
.line-item-fields .field{flex:1;min-width:110px;margin-bottom:0;}
.line-item-fields .field label{font-size:10px;}
.line-item-fields .field input,.line-item-fields .field select{padding:9px 10px;font-size:13px;}
.line-item-montant{
  margin-top:8px;text-align:right;font-size:12px;color:var(--muted);font-weight:700;
}
.line-item-montant b{color:var(--text);font-size:13px;}

/* Sections Vente(C.A.)/Achat(Coût) + lignes libres HT/TTC — demande de
   Jonathan (17/08) : distinguer clairement ce qui est vendu (aides + RAC +
   lignes libres) de ce qui est acheté (matériel/pose/prestations + lignes
   libres), avec pour chaque ligne libre (et le RAC) un choix HT/TTC + un
   taux de TVA, calculé des deux côtés (montant HT et TTC affichés côte à
   côte, aucun des deux n'écrase l'autre — cf. clarification Jonathan). */
.client-section-title-major{margin-top:26px;padding-top:16px;border-top:2px solid #e3e7ef;}
.montant-contrepartie{
  margin-top:-6px;margin-bottom:16px;font-size:11px;color:var(--muted);font-weight:700;text-align:right;
}
.poseur-extras{margin-top:10px;padding-top:10px;border-top:1px dashed #d9dfec;}
.poseur-extras .line-item{background:#eef1f8;}
.poseur-extras-title{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;}
.btn-add-line-small{
  width:100%;padding:8px;border-radius:10px;border:1.5px dashed #c7cfe0;background:#eef1f8;
  color:var(--blue);font-size:11px;font-weight:700;cursor:pointer;margin-bottom:2px;
}
.btn-add-line-small:hover{background:#e3e8f5;}

/* ---- Notes / bannières (20/08, nouveau parcours client) ---- */
.note{
  font-size:12px;color:var(--muted);background:#fafbfd;border-left:3px solid var(--blue);
  padding:10px 12px;border-radius:0 8px 8px 0;margin:0 0 14px 0;
}
.note.ok{border-left-color:var(--green);color:var(--text);background:#f0fdf4;}
.note.bad{border-left-color:var(--red);color:var(--text);background:#fef2f2;}

/* ---- Colonne "Parcours" (écran Clients, remplace les 4 anciens menus) ---- */
.parcours-cell{min-width:200px;}
.parcours-bar{height:7px;border-radius:5px;background:#e6e9f2;overflow:hidden;display:flex;margin-bottom:5px;}
.parcours-bar span{display:block;height:100%;}
.parcours-next{font-size:11.5px;color:var(--muted);margin-bottom:4px;}
.parcours-badge{display:inline-block;font-size:11px;padding:3px 9px;border-radius:999px;font-weight:700;}
.parcours-badge-ok{background:#eafaf0;color:#178a4c;}
.parcours-badge-warn{background:#fff4e0;color:#a6650a;}
.parcours-badge-cancelled{background:#fdecec;color:#c53030;}

/* ---- Modal "Suivi du parcours" ---- */
.parcours-progress-top{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:5px;}
.parcours-progress-bar{height:8px;border-radius:6px;background:#e6e9f2;overflow:hidden;margin-bottom:18px;}
.parcours-progress-bar span{display:block;height:100%;background:var(--blue);}
.parcours-phase{margin-bottom:16px;}
.parcours-phase-title{font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);margin:0 0 8px 2px;}
.parcours-step-row{display:flex;align-items:flex-start;gap:11px;padding:7px 2px;border-radius:8px;}
.parcours-step-row.locked{opacity:.45;}
.parcours-step-check{
  width:21px;height:21px;border-radius:50%;border:2px solid #d9dfec;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:white;margin-top:1px;cursor:pointer;
}
.parcours-step-check.done{background:var(--green);border-color:var(--green);}
.parcours-step-check.locked{cursor:not-allowed;}
.parcours-step-label{font-size:13.5px;line-height:1.35;}
.parcours-step-label small{display:block;color:var(--muted);font-size:11px;margin-top:1px;}
.parcours-step-row:not(.done):not(.locked) .parcours-step-label{font-weight:700;}
.parcours-side-statuses{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}
.parcours-side-status{flex:1;min-width:200px;border:1px solid #e6e9f2;border-radius:12px;padding:10px 12px;}
.parcours-side-status .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.2px;margin-bottom:8px;font-weight:800;}
.pill-row{display:flex;gap:6px;flex-wrap:wrap;}
.pill{border:1px solid #e6e9f2;border-radius:999px;padding:5px 11px;font-size:11.5px;cursor:pointer;background:white;}
.pill.sel-ok{background:var(--green);border-color:var(--green);color:white;}
.pill.sel-warn{background:var(--amber);border-color:var(--amber);color:white;}
.pill.sel-off{background:#f4f6fb;color:var(--muted);}
.btn-toggle-danger, .btn-toggle-warn{
  border:1px solid #e6e9f2;border-radius:10px;padding:9px;font-size:12.5px;font-weight:700;cursor:pointer;background:white;
}
.btn-toggle-danger{color:var(--red);}
.btn-toggle-danger.on{background:var(--red);color:white;}
.btn-toggle-warn{color:var(--amber);}
.btn-toggle-warn.on{background:var(--amber);color:white;}

/* ---- Vue tunnel globale (kanban, écran Clients, 20/08) ---- */
.btn-tunnel-toggle{background:white;color:var(--text);border:1px solid #e3e7ef;width:auto;}
.btn-tunnel-toggle.on{background:var(--blue);color:white;border-color:var(--blue);}
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px;}
.kanban-col{flex:none;width:220px;background:#fafbfd;border:1px solid #e3e7ef;border-radius:12px;padding:10px;}
.kanban-col h3{font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin:2px 4px 10px;}
.kanban-count{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;padding:1px 8px;font-size:11px;margin-left:6px;}
.kcard{background:#fff;border:1px solid #e3e7ef;border-radius:10px;padding:9px 10px;margin-bottom:8px;cursor:pointer;
  box-shadow:0 1px 4px rgba(30,40,80,.04);}
.kcard .kcard-name{font-size:12.5px;font-weight:600;}
.kcard .kcard-next{font-size:11px;color:var(--muted);margin-top:2px;}
.kanban-empty{font-size:11.5px;color:var(--muted);padding:6px 2px;}

/* ---- Waiting / done ---- */
#screen-done{align-items:center;justify-content:center;text-align:center;}
.done-check{
  width:64px;height:64px;border-radius:50%;background:#e9fbef;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  font-size:30px;
}
.done-title{font-weight:800;font-size:17px;}
.done-sub{font-size:13px;color:var(--muted);margin-top:6px;max-width:280px;}

/* 20/09/2026 — Mon suivi : ligne cliquable + état des pièces sur la fiche. */
.result-row[data-suivi-lead]{cursor:pointer;}
.result-row[data-suivi-lead]:active{transform:scale(.99);}
.lead-pieces{margin:10px 0 0;background:#fff;border:1px solid #e9edf5;border-radius:12px;padding:10px 12px;}
.lead-pieces .t{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;margin-bottom:6px;}
.lead-pieces ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;}
.lead-pieces li{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--text);}
.lead-pieces li b{font-weight:600;}
.lead-pieces .ok{color:#15803d;}.lead-pieces .manque{color:#b45309;}
.dossier-lien{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid #eef1f6;font-size:13px;color:var(--muted);}
.btn-lien{appearance:none;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:#eef2ff;color:#1d4ed8;border:0;border-radius:999px;padding:7px 12px;}
.lead-pieces a{color:#1d4ed8;}

/* ============================================================
   27/09/2026 — FICHE CLIENT en grande page (demande de Jonathan :
   « large comme le devis, tout voir d'un coup, bien cadré »).
   Tout est limité à #client-modal : les autres fenêtres ne changent pas.
   ============================================================ */
#client-modal{align-items:center;}
#client-modal .cf-card{max-width:1480px;width:97vw;border-radius:16px;padding:0;background:#eef1f7;}
#client-modal .modal-title{position:sticky;top:0;z-index:5;margin:0;padding:14px 22px;background:var(--card);
  border-bottom:1px solid #e3e7ef;font-size:18px;letter-spacing:.2px;}
#client-modal .modal-title::before{content:"FICHE CLIENT · ";color:var(--blue);font-weight:800;}
.cf-layout{display:grid;grid-template-columns:minmax(270px,1fr) minmax(460px,2.1fr) minmax(300px,1.05fr);gap:14px;padding:14px;align-items:start;}
.cf-col{min-width:0;display:flex;flex-direction:column;gap:14px;}
.cf-box{background:var(--card);border:1px solid #e3e7ef;border-radius:14px;padding:14px 16px;}
.cf-box-title{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--blue-dark);
  margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid #e3e7ef;}
.cf-box-vente{border-top:4px solid #16a34a;}
.cf-box-achat{border-top:4px solid #dc2626;}
.cf-col-c .cf-sticky{position:sticky;top:64px;background:var(--card);border:1px solid #e3e7ef;border-radius:14px;padding:14px 16px;
  max-height:calc(96vh - 90px);overflow-y:auto;border-top:4px solid var(--blue);}
#client-modal .client-section-title-major{display:none;}
#client-modal .client-section-title{margin:14px 0 6px;font-size:11px;}
#client-modal .cf-box .client-section-title:first-of-type{margin-top:0;}
#client-modal .field{margin-bottom:8px;}
#client-modal .field input,#client-modal .field select,#client-modal .field textarea{padding:8px 10px;font-size:13px;border-radius:9px;}
#client-modal .field label{font-size:11px;margin-bottom:3px;}
#client-modal .btn-add-line{padding:7px;margin-bottom:10px;border-radius:9px;}
/* lignes matériel / poseurs / prestations : compactes, sur une ligne */
#client-modal .line-item{padding:8px 10px;border-radius:10px;margin-bottom:6px;background:#fbfcfe;}
#client-modal .line-item-head{margin-bottom:4px;}
#client-modal .line-item-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px;}
#client-modal .line-item-fields .field{min-width:0;margin:0;}
#client-modal .line-item-fields .field label{font-size:9.5px;}
#client-modal .line-item-fields .field input,#client-modal .line-item-fields .field select{padding:6px 8px;font-size:12.5px;}
#client-modal .line-item-montant{margin-top:6px;padding-top:5px;border-top:1px dashed #e3e7ef;font-size:12px;}
#client-modal .poseur-extras{margin-top:6px;padding-top:6px;}
/* récapitulatif détaillé */
#client-modal .client-recap{margin-top:0;background:none;padding:0;}
#client-modal #cf-recap > .client-recap-row{display:none;}
.cf-rtable{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:6px;}
.cf-rtable th{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);text-align:right;padding:4px 4px;border-bottom:1px solid #e3e7ef;}
.cf-rtable th:first-child{text-align:left;}
.cf-rtable td{padding:4px 4px;text-align:right;white-space:nowrap;border-bottom:1px solid #f1f3f8;}
.cf-rtable td:first-child{text-align:left;white-space:normal;color:var(--muted);}
.cf-rtable tr.cf-rsec td{background:#f4f6fb;font-weight:800;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--blue-dark);}
.cf-rtable tr.cf-rtot td{font-weight:800;color:var(--text);border-top:1.5px solid #d5dbe8;}
.cf-rtable tr.cf-rfinal td{font-weight:800;font-size:14px;color:var(--blue-dark);}
.cf-rtable .neg{color:var(--red)!important;}
#client-modal .cf-sticky .btn-primary{margin-top:12px;}
@media (max-width:1100px){
  .cf-layout{grid-template-columns:1fr 1.6fr;}
  .cf-col-c{grid-column:1 / -1;}
  .cf-col-c .cf-sticky{position:static;max-height:none;}
}
@media (max-width:760px){
  #client-modal .cf-card{width:100%;border-radius:16px 16px 0 0;}
  .cf-layout{grid-template-columns:1fr;padding:10px;}
}
#client-modal .line-item-fields{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));}
#client-modal .line-item-fields .field:has(select[data-mat-field="idx"]),
#client-modal .line-item-fields .field:has(input[data-mat-field="nom"]),
#client-modal .line-item-fields .field:has(input[data-pos-field="nom"]){grid-column:span 2;}
#client-modal .switch-label{display:flex;align-items:center;gap:6px;font-size:12px;}
#client-modal .switch-label input{width:auto;}

/* 27/09 : récap détaillé ligne par ligne */
.cf-rtable tr.cf-rsub td{font-weight:700;color:var(--text);padding-top:7px;}
.cf-rtable tr.cf-rsub td:first-child{color:var(--text);}
.cf-rtable .cf-rind{display:block;padding-left:12px;font-size:12px;}
.cf-rtable .cf-rind2{display:block;padding-left:26px;font-size:11.5px;font-style:italic;}
.cf-rtable .cf-rsrc{font-size:10px;color:var(--muted);opacity:.8;}
.cf-rtable td{font-variant-numeric:tabular-nums;}

#client-modal .cf-aide-tva{margin-top:5px;padding:5px 8px!important;font-size:11.5px!important;background:#fff8e6!important;border-color:#f0d9a0!important;}
#client-modal .cf-aide-tva-note{font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:600;}