/* ============================================================================
   Aurachronis — thème de marque (clone du design system Claude Design)
   Portage du langage visuel (AuraColors, Cinzel/Montserrat, pilules dorées,
   cartes chaudes) par-dessus Bootstrap 5.3. Le CRM interne n'affiche pas le
   produit : ce thème habille tout ce qui entoure (nav, cartes, formulaires…).
   ========================================================================== */

/* L'attribut `hidden` doit TOUJOURS cacher, y compris sur un élément portant une classe
   utilitaire Bootstrap. `.d-inline-block`, `.d-flex`, `.d-block`… sont déclarées `!important`
   chez Bootstrap et l'emportent sur le `display:none` que le navigateur applique à `[hidden]` :
   l'élément reste visible alors que le JS le croit caché. C'est ce qui affichait « Lire la
   suite » sous des notes d'une seule ligne. Une règle générale plutôt qu'un correctif par cas :
   l'app pose `hidden` à une trentaine d'endroits, chacun à une classe `d-*` de la même panne. */
[hidden] { display: none !important; }

:root {
  /* — Couleurs (AuraColors) — */
  --brown:        #1E1111;  /* primaire : texte, panneaux (le « noir » chaud) */
  --brown-soft:   #2c1c1c;
  --gold:         #BDA575;  /* unique accent */
  --gold-hover:   #CEB891;
  --gold-press:   #9C8559;
  --beige:        #E5E3DF;  /* fond principal */
  --white:        #ffffff;
  --sand:         #D8D2C8;  /* filets & séparateurs */
  --ink:          #575350;  /* texte secondaire */
  --grey:         #808080;
  --error:        #DC3545;
  --lumiere:      #FBF6EC;

  /* — Typographie — */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body:    'Montserrat', 'Gotham', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* — Rayons — */
  --r-card:  12px;
  --r-field: 12px;
  --r-pill:  999px;

  /* — Ombres chaudes (teintées brun) — */
  --shadow-card:   0 1px 2px rgba(30,17,17,.05), 0 2px 8px rgba(30,17,17,.06);
  --shadow-md:     0 6px 18px rgba(30,17,17,.10);
  --shadow-header: 0 2px 12px rgba(30,17,17,.07);
  --glow-gold:     0 0 0 .2rem rgba(189,165,117,.30);

  --ease: cubic-bezier(.4, 0, .2, 1);

  /* — Remaps Bootstrap — */
  --bs-body-bg: var(--beige);
  --bs-body-color: var(--brown);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: .925rem;
  --bs-primary: var(--gold);
  --bs-primary-rgb: 189,165,117;
  --bs-border-color: var(--sand);
  --bs-border-radius: var(--r-card);
  --bs-link-color: var(--gold-press);
  --bs-link-hover-color: var(--brown);
  --bs-emphasis-color: var(--brown);
  --bs-secondary-color: var(--ink);

  /* — Couleurs de stade (liste des contacts) — */
  --st-quali:#7A6E5C; --st-first:#556488; --st-relance:#9A7420;
  --st-late:#B23A2A; --st-win:#4E7043; --st-lost:#8E6A63;
  --due:#C0392B; /* badge relances en retard */
}

/* ============================================================================
   Liste des contacts (suivi prospects) — une mise en page par onglet
   ========================================================================== */
/* Barre d'onglets du suivi : onglets centrés, actions à droite (grille symétrique
   1fr | onglets | 1fr pour un centrage réel indépendant de la largeur des actions). */
.phoning-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem}
.phoning-toolbar .phoning-tabs{grid-column:2;justify-self:center}
.phoning-toolbar .phoning-actions{grid-column:3;justify-self:end;display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width:991.98px){
  .phoning-toolbar{grid-template-columns:1fr}
  .phoning-toolbar .phoning-tabs,.phoning-toolbar .phoning-actions{grid-column:1;justify-self:center}
}

/* ── Pipeline de navigation (barre d'onglets = entonnoir coloré par stade) ──
   Actif = combinaison F (inactifs voilés) + G (actif agrandi) + H (libellé sur pastille).
   Le clip-path rogne bordures/box-shadow : la mise en avant passe par le fond, le
   drop-shadow (qui suit la pointe) et une pastille interne. padding-block réserve la
   place au débordement vertical de l'actif ; overflow-x autorise le défilement si étroit. */
.phoning-tabs.pipe{display:flex;align-items:center;max-width:100%;overflow-x:auto;overflow-y:visible;padding-block:14px;min-width:0}
.phoning-tabs.pipe a{position:relative;display:flex;align-items:center;gap:.5em;
  padding:.7rem 1.35rem .7rem 1.75rem;margin-left:-16px;color:#fff;text-decoration:none;font-weight:600;
  white-space:nowrap;transition:.16s var(--ease);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}
.phoning-tabs.pipe a:first-child{margin-left:0;padding-left:1.2rem;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}
.phoning-tabs.pipe a .ms{font-size:1.1rem;opacity:.92}
.phoning-tabs.pipe a .lbl{transition:.16s var(--ease)}
.phoning-tabs.pipe a .c{font-size:.82em;opacity:.8;font-variant-numeric:tabular-nums}
.phoning-tabs.pipe a[data-st=quali]{background:var(--st-quali)}
.phoning-tabs.pipe a[data-st=first]{background:var(--st-first)}
.phoning-tabs.pipe a[data-st=relance]{background:var(--st-relance)}
.phoning-tabs.pipe a[data-st=win]{background:var(--st-win)}
.phoning-tabs.pipe a[data-st=lost]{background:var(--st-lost)}
/* F : inactifs voilés de clair, texte foncé */
.phoning-tabs.pipe a:not(.on){background-image:linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.66));color:var(--ink)}
.phoning-tabs.pipe a:not(.on) .ms{color:var(--gold-press)}
.phoning-tabs.pipe a:not(.on):hover{background-image:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45));color:var(--brown)}
/* G : actif agrandi (déborde) + ombre portée qui suit le chevron */
.phoning-tabs.pipe a.on{padding-top:.98rem;padding-bottom:.98rem;margin-top:-.3rem;margin-bottom:-.3rem;
  z-index:6;filter:drop-shadow(0 6px 7px rgba(30,17,17,.3))}
/* H : libellé de l'actif sur pastille blanche */
.phoning-tabs.pipe a.on .lbl{background:#fff;color:var(--brown);border-radius:999px;padding:.16rem .66rem;font-weight:700}
.phoning-tabs.pipe a.on .c{opacity:.92}
/* badge relances en retard */
.phoning-tabs.pipe .due{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--due);color:#fff;font-size:.7rem;font-weight:700;line-height:1;
  box-shadow:0 0 0 2px rgba(255,255,255,.4)}

.cl-scroll{overflow-x:auto}
.cl-av{flex:none;width:44px;height:44px;border-radius:10px;object-fit:cover;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:600;color:var(--gold-hover);background:var(--brown);
  box-shadow:inset 0 0 0 1px rgba(30,17,17,.08);cursor:zoom-in;overflow:hidden}
.cl-av.sm{width:38px;height:38px;font-size:.8rem}
.cl-chan{font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--gold-press)}
.cl-chan.prescripteur{color:var(--st-first)} .cl-chan.direct{color:var(--ink)}
.cl-sig{display:inline-flex;align-items:center;gap:.3em;font-size:.7rem;font-weight:600;color:var(--ink);
  border:1px solid var(--sand);border-radius:var(--r-pill);padding:.06rem .5rem;white-space:nowrap;text-decoration:none}
.cl-sig.ancien logiciel{color:#7B5EA7;border-color:color-mix(in srgb,#7B5EA7 40%,var(--sand))}
.cl-sig.shop{color:#5E8E3E;border-color:color-mix(in srgb,#5E8E3E 40%,var(--sand))}
.cl-sig.miss{color:var(--ink);border-style:dashed}
.cl-pill{display:inline-flex;align-items:center;gap:.35em;border-radius:var(--r-pill);padding:.12rem .55rem;
  font-size:.74rem;font-weight:600;white-space:nowrap;line-height:1.5}
.cl-dot{width:8px;height:8px;border-radius:50%;flex:none}
.s-quali{color:var(--st-quali);background:color-mix(in srgb,var(--st-quali) 15%,transparent)}
.s-first{color:var(--st-first);background:color-mix(in srgb,var(--st-first) 15%,transparent)}
.s-relance{color:var(--st-relance);background:color-mix(in srgb,var(--st-relance) 16%,transparent)}
.s-late{color:var(--st-late);background:color-mix(in srgb,var(--st-late) 15%,transparent)}
.s-win{color:var(--st-win);background:color-mix(in srgb,var(--st-win) 15%,transparent)}
.s-lost{color:var(--st-lost);background:color-mix(in srgb,var(--st-lost) 15%,transparent)}
.d-quali{background:var(--st-quali)} .d-first{background:var(--st-first)} .d-relance{background:var(--st-relance)}
.d-late{background:var(--st-late)} .d-win{background:var(--st-win)} .d-lost{background:var(--st-lost)}
.cl-open{border:1px solid var(--gold);background:transparent;color:var(--gold-press);border-radius:var(--r-pill);
  padding:.3rem .8rem;font-size:.8rem;font-weight:500;white-space:nowrap;text-decoration:none;flex:none;transition:.15s var(--ease)}
.cl-open:hover{background:var(--gold);color:var(--brown)}
.cl-open.solid{background:var(--gold);color:var(--brown)}
.cl-open.ghost{border-color:var(--sand);color:var(--ink)}
.cl-open.ghost:hover{background:var(--sand);color:var(--brown)}
/* — Pastilles « commandes Shopify » —
   DEUX pastilles, deux métiers, et c'est ce qui rend le client à une seule commande non
   particulier : .hist compte l'histoire (neutre, toujours là), les autres ne montrent que ce
   qui est ouvert. Un état unique ne saurait pas dire « bon client ET livraison en retard »,
   qui est le cas courant chez un revendeur qui réassortit. */
.cl-cmd{display:inline-flex;align-items:center;gap:.4em;border-radius:var(--r-pill);
  padding:.1rem .55rem;font-size:.735rem;font-weight:600;white-space:nowrap;
  line-height:1.5;font-variant-numeric:tabular-nums;vertical-align:1px}
.cl-cmd .ms{font-size:1.02em;vertical-align:-2px}
.cl-cmd .sep{opacity:.45;font-weight:400;margin:0 .28em}
.cl-cmd.hist{color:var(--brown);background:transparent;border:1px solid var(--sand)}
.cl-cmd.prod{color:var(--st-relance);background:color-mix(in srgb,var(--st-relance) 16%,transparent)}
/* Rouge plein, assumé : c'est le seul état qui a le droit de crier dans une liste
   parcourue toute la journée (arbitré avec Olivier). */
.cl-cmd.late{color:#fff;background:var(--due)}
/* « à facturer » : de l'argent qu'on n'a pas encore demandé. Pas le rouge d'une promesse
   rompue au client — l'or, couleur d'action de la marque, qui dit « à faire », pas « alerte ». */
.cl-cmd.bill{color:var(--brown);background:var(--gold)}
.cl-cmd.done{color:var(--st-win);background:color-mix(in srgb,var(--st-win) 13%,transparent)}
.cl-cmd.void{color:var(--grey);background:color-mix(in srgb,var(--grey) 13%,transparent);
  text-decoration:line-through;text-decoration-thickness:1px}
/* Le silence : pas une alerte, un signal de réassort. */
.cl-cmd.quiet{color:var(--st-first);background:color-mix(in srgb,var(--st-first) 12%,transparent)}

.cl-name{color:var(--brown);text-decoration:none;font-weight:600}
.cl-name:hover{color:var(--gold-press);text-decoration:underline}
.cl-stars{color:var(--gold-press);letter-spacing:-1px}
.cl-tnum{font-variant-numeric:tabular-nums}

/* Recherche (colonnes alignées) */
.cl-cols{background:var(--white);border:1px solid var(--sand);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);min-width:720px}
.cl-cols .hd,.cl-cols .rw{display:grid;grid-template-columns:52px 1fr 116px 152px 168px 92px;gap:12px;
  align-items:center;padding:10px 14px}
.cl-cols .hd{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--sand)}
.cl-cols .rw+.rw{border-top:1px solid var(--beige)}
.cl-cols .rw:hover{background:color-mix(in srgb,var(--gold) 7%,transparent)}
.cl-cols .nm{font-weight:600} .cl-cols .loc{font-size:.78rem;color:var(--ink)}
.cl-cols .cell{font-size:.8rem;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-cols .rt{text-align:right} .cl-cols .rt .n{font-size:.77rem;color:var(--ink)}

/* À qualifier (cartes de triage) */
.cl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.cl-cards .cd{background:var(--white);border:1px solid var(--sand);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.cl-cards .ph{height:120px;position:relative;overflow:hidden;background:var(--brown)}
/* Recadrage uniforme (cover) quelles que soient les proportions de la photo Google.
   Position absolue inset:0 = la boîte fait foi, pas la taille intrinsèque de l'image. */
.cl-cards .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cl-cards .ph .ini{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.7rem;font-weight:600;color:var(--gold-hover)}
.cl-cards .rtb{position:absolute;top:8px;right:8px;background:color-mix(in srgb,#1E1111 66%,transparent);color:#fff;
  border-radius:var(--r-pill);padding:.1rem .55rem;font-size:.74rem;font-weight:600;backdrop-filter:blur(2px)}
.cl-cards .bd{padding:11px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.cl-cards .bd .nm{font-weight:600;line-height:1.25}
.cl-cards .bd .meta{font-size:.79rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-cards .ft{margin-top:auto;padding:10px 14px;border-top:1px solid var(--beige);
  display:flex;align-items:center;justify-content:space-between;gap:8px}

/* Premiers appels (numéro en tête) */
.cl-call{display:flex;flex-direction:column;gap:8px}
.cl-call .rw{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--sand);
  border-radius:var(--r-card);padding:0 16px 0 0;box-shadow:var(--shadow-card);overflow:hidden}
/* Photo : carré FIXE (même côté sur toutes les lignes), rempli (cover) quelles que soient
   les proportions d'origine. À ras à gauche ; les lignes ont toutes la hauteur du carré.
   overflow:hidden du conteneur assure l'arrondi des coins gauche. */
.cl-call .cl-av, .cl-rel .cl-av, .cl-gc .cl-av, .cl-lostg .cl-av{flex:none;width:64px;height:64px;
  object-fit:cover;font-size:1.3rem;border-radius:0;box-shadow:none;align-self:stretch}
.cl-call .num, .cl-rel .num{flex:none;width:176px;border-right:1px solid var(--beige);padding-right:16px}
.cl-call .num a, .cl-rel .num a{font-size:1.05rem;font-weight:700;letter-spacing:.03em;color:var(--brown);text-decoration:none;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cl-call .body .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-call .num a:hover, .cl-rel .num a:hover{color:var(--gold-press)}
.cl-call .num .k{font-size:.72rem;color:var(--ink);margin-top:1px}
.cl-call .num .no, .cl-rel .num .no{color:var(--ink);font-size:.9rem}
.cl-call .body{flex:1;min-width:0}
.cl-call .body .nm{font-weight:600}
.cl-call .body .meta{font-size:.8rem;color:var(--ink);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Relances (date + action, piste 3) */
.cl-rel{display:flex;flex-direction:column;gap:8px}
.cl-rel .rw{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--sand);
  border-radius:var(--r-card);padding:0 16px;box-shadow:var(--shadow-card);overflow:hidden}
.cl-rel .when{flex:none;width:88px;text-align:center;border-right:1px solid var(--beige);padding-right:14px}
.cl-rel .when .d{font-size:1.4rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cl-rel .when .m{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
.cl-rel .when.late .d{color:var(--st-late)} .cl-rel .when.soon .d{color:var(--st-relance)}
.cl-rel .body{flex:1;min-width:0}
/* 4e colonne cliquable : ouvre la fiche, sans l'apparence d'un lien (action soulignée au survol). */
.cl-rel a.cl-rowlink{display:block;text-decoration:none;color:inherit}
.cl-rel a.cl-rowlink:hover .task{color:var(--gold-press);text-decoration:underline}
.cl-rel .body .task{font-weight:600}
.cl-rel .body .who{font-size:.82rem;color:var(--ink);margin-top:1px;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cl-rel .body .who b{color:var(--brown);font-weight:600}
.cl-rel .body .who .cl-asg{color:var(--brown);font-weight:500;white-space:nowrap} .cl-rel .body .who .cl-asg .ms{font-size:.95em;vertical-align:-2px;margin-right:1px}

/* Gagné (compact + puces système) */
.cl-gc{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--sand);
  border-radius:var(--r-card);box-shadow:var(--shadow-card);overflow:hidden}
/* Photo à ras du bord gauche, pleine hauteur (carte unique) ; overflow:hidden arrondit les coins. */
.cl-gc .rw{display:flex;align-items:center;gap:14px;padding:0 16px 0 0}
.cl-gc .rw+.rw{border-top:1px solid var(--beige)}
.cl-gc .mid{flex:1;min-width:0}
.cl-gc .mid .nm{font-weight:600}
.cl-gc .mid .meta{font-size:.8rem;color:var(--ink)}
.cl-gc .chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* Perdu (groupé par motif) */
.cl-lostg{background:var(--white);border:1px solid var(--sand);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);padding:4px 0;overflow:hidden}
.cl-lostg .gh{font-size:.75rem;font-weight:700;color:var(--st-lost);letter-spacing:.03em;
  padding:12px 16px 6px;display:flex;align-items:center;gap:.5em;border-top:1px solid var(--beige)}
.cl-lostg .gh:first-child{border-top:0}
.cl-lostg .gh .n{color:var(--ink);font-weight:600}
/* Photo pleine hauteur, carrée, alignée sous l'en-tête de motif (padding gauche conservé). */
.cl-lostg .rw{display:flex;align-items:center;gap:14px;padding:0 16px}
.cl-lostg .rw+.rw{border-top:1px solid var(--beige)}
.cl-lostg .rw .mid{flex:1;min-width:0}
.cl-lostg .rw .nm{font-weight:600}
.cl-lostg .rw .meta{font-size:.79rem;color:var(--ink)}

body {
  background: var(--beige);
  color: var(--brown);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* — Titres : Cinzel pour les grands titres, Montserrat sinon (lisibilité CRM) — */
h1, .h1, h2, .h2 {
  font-family: var(--font-display);
  letter-spacing: .04em;
  color: var(--brown);
}
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--brown);
}

a { color: var(--gold-press); }
a:hover { color: var(--brown); }

.text-muted { color: var(--ink) !important; }

/* ── Barre de navigation ─────────────────────────────────────────────────── */
.app-navbar {
  background: var(--white);
  border-bottom: 1px solid var(--sand);
  box-shadow: var(--shadow-header);
}
.app-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .14em;
  color: var(--brown);
  text-transform: uppercase;
  line-height: 1;
}
.app-brand .dot { color: var(--gold); }
.app-tagline {
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-press);
  margin-top: 3px;
}
.app-navbar .nav-link {
  color: var(--ink);
  font-weight: 500;
  font-size: .875rem;
  padding: .5rem .85rem;
  border-bottom: 2px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.app-navbar .nav-link:hover { color: var(--brown); }
.app-navbar .nav-link.active {
  color: var(--brown);
  border-bottom-color: var(--gold);
  font-weight: 600;
}
.app-navbar .nav-link .ms { font-size: 1.05rem; vertical-align: -3px; margin-right: .25rem; color: var(--gold-press); }

/* Recherche globale dans la barre de navigation */
.app-navbar-search { flex: 1 1 auto; min-width: 220px; max-width: 520px; }
@media (max-width: 991.98px) { .app-navbar-search { max-width: none; } }
/* Bouton roue dentée « Paramètres » actif (une page paramètre est ouverte) */
.app-navbar .dropdown-toggle.active { border-color: var(--gold); color: var(--brown); }
/* Icônes Material Symbols dans le menu déroulant des paramètres */
.dropdown-item .ms { font-size: 1.05rem; vertical-align: -3px; margin-right: .4rem; color: var(--gold-press); }
.dropdown-item.active .ms { color: inherit; }

/* ── Icônes Material Symbols ──────────────────────────────────────────────── */
.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga'; letter-spacing: normal;
  display: inline-block; vertical-align: middle;
}

/* ── Cartes ──────────────────────────────────────────────────────────────── */
.card {
  --bs-card-bg: var(--white);
  --bs-card-border-color: var(--sand);
  --bs-card-border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--r-card);
}
.card.shadow-sm { box-shadow: var(--shadow-card) !important; }
.card.border-0 { border: 0 !important; }

/* ── Boutons : pilule dorée, MAJUSCULES ──────────────────────────────────── */
.btn {
  --bs-btn-border-radius: var(--r-pill);
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  font-size: .78rem;
}
.btn-lg { font-size: .9rem; }
.btn-primary {
  --bs-btn-color: var(--brown);
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--brown);
  --bs-btn-hover-bg: var(--gold-hover);
  --bs-btn-hover-border-color: var(--gold-hover);
  --bs-btn-active-color: var(--brown);
  --bs-btn-active-bg: var(--gold-press);
  --bs-btn-active-border-color: var(--gold-press);
  --bs-btn-disabled-color: var(--brown);
  --bs-btn-disabled-bg: var(--gold);
  --bs-btn-disabled-border-color: var(--gold);
}
.btn-outline-primary {
  --bs-btn-color: var(--gold-press);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--brown);
  --bs-btn-hover-bg: rgba(189,165,117,.14);
  --bs-btn-hover-border-color: var(--gold);
  --bs-btn-active-color: var(--brown);
  --bs-btn-active-bg: var(--gold);
  --bs-btn-active-border-color: var(--gold);
}
.btn-outline-secondary {
  --bs-btn-color: var(--brown);
  --bs-btn-border-color: var(--sand);
  --bs-btn-hover-color: var(--brown);
  --bs-btn-hover-bg: rgba(30,17,17,.05);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: var(--brown);
  --bs-btn-active-bg: rgba(30,17,17,.08);
  --bs-btn-active-border-color: var(--ink);
}
.btn-outline-danger {
  --bs-btn-color: var(--error);
  --bs-btn-border-color: rgba(220,53,69,.5);
  --bs-btn-hover-bg: var(--error);
  --bs-btn-hover-border-color: var(--error);
}
.btn:focus-visible, .btn:focus { box-shadow: var(--glow-gold); }
.btn:active { transform: scale(.98); }
.btn-link { text-transform: none; letter-spacing: normal; font-weight: 500; }

/* ── Champs de formulaire ────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--r-field);
  border-color: var(--sand);
  color: var(--brown);
  background-color: var(--white);
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
}
.form-label { color: var(--ink); font-weight: 500; }
.form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
.form-check-input:focus { border-color: var(--gold); box-shadow: var(--glow-gold); }

/* ── Onglets de pipeline (btn-group) ─────────────────────────────────────── */
.btn-group .btn { text-transform: none; letter-spacing: .01em; font-weight: 500; }
.btn-group .btn-primary { font-weight: 600; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table { --bs-table-color: var(--brown); --bs-table-border-color: var(--sand); }
.table > :not(caption) > * > * { border-bottom-color: var(--sand); }
.table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: rgba(189,165,117,.08);
  --bs-table-hover-color: var(--brown);
}
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--sand); }

/* ── Badges de marque ────────────────────────────────────────────────────── */
.badge {
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .02em;
  padding: .34em .7em;
}
/* remaps des classes Bootstrap utilisées dans les templates */
.badge.text-bg-success { background: var(--gold) !important; color: var(--brown) !important; }
.badge.text-bg-warning { background: #F3EEE2 !important; color: var(--gold-press) !important; border: 1px solid var(--gold); }
.badge.text-bg-danger  { background: var(--error) !important; color: #fff !important; }
.badge.text-bg-secondary { background: var(--sand) !important; color: var(--ink) !important; }
.badge-soft { background: #F1ECE3 !important; color: var(--ink) !important; border: 1px solid var(--sand); }

/* ── Bandeau mode sans-envoi & alertes ───────────────────────────────────── */
.alert { border-radius: var(--r-card); border: 1px solid transparent; }
.alert-warning { background: #F5EFE0; color: var(--gold-press); border-color: var(--gold); }
.alert-info { background: #EFEEEA; color: var(--ink); border-color: var(--sand); }
.alert-success { background: #F0ECE0; color: var(--brown); border-color: var(--gold); }
.alert-secondary { background: var(--white); color: var(--ink); border-color: var(--sand); }
.outbound-banner {
  background: var(--brown); color: var(--lumiere);
  border: 0; border-radius: 0; letter-spacing: .04em;
}
.outbound-banner .ms { color: var(--gold); vertical-align: -3px; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination {
  --bs-pagination-color: var(--ink);
  --bs-pagination-active-bg: var(--gold);
  --bs-pagination-active-border-color: var(--gold);
  --bs-pagination-active-color: var(--brown);
  --bs-pagination-hover-color: var(--brown);
  --bs-pagination-focus-box-shadow: var(--glow-gold);
  --bs-pagination-border-color: var(--sand);
}

/* ── Écran de connexion ──────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background:
  linear-gradient(180deg, var(--beige), #dcd8d1); }
.login-card { max-width: 400px; width: 100%; }
.login-brand { font-family: var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--brown); }
.login-tagline { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-press); }

/* Divers */
hr { border-color: var(--sand); opacity: 1; }
.nav-pills .nav-link.active { background: var(--gold); color: var(--brown); }
.nav-pills .nav-link { color: var(--ink); }
::selection { background: rgba(189,165,117,.35); }

/* ── Logo ────────────────────────────────────────────────────────────────── */
.app-logo { height: 40px; width: auto; display: block; }
.app-context {
  font-family: var(--font-body); font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-press);
  border-left: 1px solid var(--sand); padding-left: .7rem; margin-left: .1rem; line-height: 1.1;
}
.login-logo { height: 64px; width: auto; }

/* ── Tuiles de statistiques ──────────────────────────────────────────────── */
.stat-tile { background: var(--white); border: 1px solid var(--sand); border-radius: var(--r-card);
  box-shadow: var(--shadow-card); text-align: center; padding: 1.1rem .5rem; }
.stat-tile .stat-num { font-family: var(--font-display); font-size: 1.8rem; color: var(--brown); line-height: 1; }
.stat-tile .stat-lbl { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-top: .35rem; }

/* Icônes inline dans le texte (boutons, badges, titres) */
.btn .ms, .badge .ms, h2 .ms, h5 .ms, .card-body h2 .ms { font-size: 1.05em; vertical-align: -3px; margin-right: .22rem; }
.badge .ms { font-size: .95em; margin-right: .15rem; }
.section-icon { color: var(--gold-press); }

/* ── Graphique à barres verticales (origine 0) ───────────────────────────── */
.barchart { display: flex; align-items: flex-end; justify-content: center; gap: 3rem;
  height: 200px; padding: 1.4rem 1rem .3rem; border-bottom: 2px solid var(--sand); }
.barchart .col { display: flex; flex-direction: column; align-items: center; }
.barchart .bar { width: 76px; background: linear-gradient(180deg, var(--gold-hover), var(--gold-press));
  border-radius: 8px 8px 0 0; box-shadow: var(--shadow-card); min-height: 3px; }
.barchart .bar-val { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  color: var(--brown); margin-bottom: .4rem; }
.barchart-labels { display: flex; justify-content: center; gap: 3rem; padding: .55rem 1rem 0; }
.barchart-labels .lbl { width: 76px; text-align: center; font-size: .74rem; color: var(--ink);
  text-transform: capitalize; }
.barchart-labels .lbl.cur { color: var(--brown); font-weight: 600; }

/* ── Graphique journalier (une barre par jour, origine 0) ────────────────── */
.daychart { display: flex; align-items: flex-end; gap: 2px; height: 160px;
  padding-top: 1.2rem; border-bottom: 2px solid var(--sand); }
.daychart .dbar { flex: 1 1 0; background: linear-gradient(180deg, var(--gold-hover), var(--gold-press));
  border-radius: 3px 3px 0 0; transition: background .15s var(--ease); }
.daychart .dbar:hover { background: var(--brown); }
.daychart .dbar.today { outline: 1px solid var(--gold-press); }
.daychart-axis { display: flex; gap: 2px; padding-top: .3rem; }
.daychart-axis .d { flex: 1 1 0; text-align: center; font-size: .58rem; color: var(--grey); }

.daychart-axis .d.cur { color: var(--gold-press); font-weight: 700; }

/* ============================================================================
   FICHE PROSPECT (préfixe .pf-)
   Structure : bandeau d'état collant + historique en colonne principale + rail.
   ========================================================================== */

/* — Bandeau d'état, collant sous la barre d'onglets — */
.pf-status{
  position:sticky; top:0; z-index:40; background:var(--lumiere);
  border:1px solid var(--sand); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:12px 16px; margin-bottom:1rem;
}
.pf-status-inner{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center}
.pf-id{display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap}
.pf-id h1{
  font-family:var(--font-display); font-size:1.28rem; font-weight:600; margin:0;
  letter-spacing:.01em; min-width:0;
}
.pf-tel{
  font-weight:700; font-size:1.02rem; color:var(--brown); text-decoration:none;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
}
.pf-tel:hover{color:var(--gold-press)}
.pf-tel .ms{font-size:1.05em}
.pf-tel+.pf-tel{margin-left:2px}

/* — Indicateurs d'état alignés — */
.pf-state{display:flex; flex-wrap:wrap; align-items:stretch; margin-left:auto}
.pf-st{padding:0 14px; border-left:1px solid var(--sand); display:flex; flex-direction:column; justify-content:center; gap:1px}
.pf-st:first-child{border-left:none}
.pf-st .k{font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); font-weight:600}
.pf-st .v{font-size:.87rem; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.pf-st .v.warn{color:var(--st-relance)}
.pf-st .v.late{color:var(--due)}
.pf-st .v.muted{color:var(--ink); font-weight:500}
.pf-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* — Badges de stade — */
.pf-b{display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:600;
  padding:2.5px 9px; border-radius:var(--r-pill); white-space:nowrap}
.pf-b .ms{font-size:1em; vertical-align:-2px}
.pf-b-relance{background:color-mix(in srgb,var(--st-relance) 17%,transparent); color:var(--st-relance); border:1px solid color-mix(in srgb,var(--st-relance) 38%,transparent)}
.pf-b-gagne{background:color-mix(in srgb,var(--st-win) 15%,transparent); color:var(--st-win); border:1px solid color-mix(in srgb,var(--st-win) 36%,transparent)}
.pf-b-perdu{background:color-mix(in srgb,var(--st-lost) 18%,transparent); color:var(--st-lost); border:1px solid color-mix(in srgb,var(--st-lost) 40%,transparent)}
.pf-b-quali{background:color-mix(in srgb,var(--st-quali) 17%,transparent); color:var(--st-quali); border:1px solid color-mix(in srgb,var(--st-quali) 38%,transparent)}
.pf-b-soft{background:color-mix(in srgb,var(--sand) 62%,transparent); color:var(--ink); border:1px solid var(--sand)}
/* Dossier éditable DANS la pastille du bandeau : le <select> doit se lire comme du texte au
   repos, sinon un contrôle de formulaire au milieu des badges casse la ligne d'état. Il hérite
   donc taille, graisse et couleur du badge, et ne montre sa nature qu'au survol. */
.pf-b-folder{gap:2px}
.pf-b-folder select.pf-ed{font-size:inherit; font-weight:inherit; color:inherit; line-height:inherit;
  background:transparent; border:0; padding:0 16px 0 0; margin:0; height:auto; min-height:0;
  max-width:26ch; text-overflow:ellipsis; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 8px) center,calc(100% - 4px) center; background-size:4px 4px,4px 4px;
  background-repeat:no-repeat}
.pf-b-folder select.pf-ed:hover{background-color:color-mix(in srgb,var(--sand) 85%,transparent)}
.pf-b-folder select.pf-ed:focus{outline:2px solid var(--gold); outline-offset:1px}

/* — Disposition : historique dominant, rail de contexte — */
.pf-grid{display:grid; gap:1rem; grid-template-columns:minmax(0,1fr) 336px}
@media (max-width:1199.98px){ .pf-grid{grid-template-columns:1fr} }
.pf-rail{display:flex; flex-direction:column; gap:1rem; align-self:start}
@media (min-width:1200px){ .pf-rail{position:sticky; top:96px} }
.pf-card{background:var(--lumiere); border:1px solid var(--sand); border-radius:var(--r-card); box-shadow:var(--shadow-card)}
.pf-card-b{padding:15px 17px}
.pf-card h2{
  font-family:var(--font-display); font-size:.94rem; font-weight:600; margin:0 0 11px;
  letter-spacing:.03em; display:flex; align-items:center; gap:7px;
}
.pf-card h2 .ms{color:var(--gold-press); font-size:1.15em}
.pf-card h2 .n{margin-left:auto; font-family:var(--font-body); font-size:.72rem; color:var(--ink); font-weight:500; letter-spacing:0}

/* — Historique — */
.pf-tl{display:flex; flex-direction:column}
.pf-ev{display:grid; grid-template-columns:26px 1fr; gap:11px; padding:13px 0; border-bottom:1px solid var(--sand)}
.pf-ev:last-child{border-bottom:none; padding-bottom:2px}
.pf-ev:first-child{padding-top:2px}
.pf-dot{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px}
.pf-dot .ms{font-size:15px; vertical-align:0}
.pf-dot.in{background:color-mix(in srgb,var(--st-first) 18%,transparent); color:var(--st-first)}
.pf-dot.out{background:color-mix(in srgb,var(--gold) 30%,transparent); color:var(--gold-press)}
.pf-dot.call{background:color-mix(in srgb,var(--st-quali) 20%,transparent); color:var(--st-quali)}
.pf-dot.cmd{background:color-mix(in srgb,var(--st-win) 20%,transparent); color:var(--st-win)}
/* Adresse morte : gris, pas rouge — c'est un fait constaté, pas une alerte à traiter. */
.pf-dot.bounce{background:color-mix(in srgb,var(--grey) 20%,transparent); color:var(--grey)}

/* — Détail des articles d'une commande — */
.pf-lines{width:100%; border-collapse:collapse; font-size:.83rem}
.pf-lines td{padding:2px 0; vertical-align:top}
.pf-lines .q{width:2.6em; color:var(--ink); font-variant-numeric:tabular-nums}
.pf-lines .a{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600}
.pf-lines .sub{color:var(--ink); font-size:.78rem; font-weight:400}
.pf-lines tr.tt td{border-top:1px solid var(--sand); padding-top:5px; font-weight:600}

/* — Rail : résumé des commandes — */
.pf-cmd-tot{display:flex; align-items:baseline; gap:8px; margin:2px 0 10px}
.pf-cmd-tot .v{font-family:var(--font-display); font-size:1.42rem; font-weight:600;
  font-variant-numeric:tabular-nums}
.pf-cmd-tot .u{font-size:.76rem; color:var(--ink)}
.pf-cmd-row{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:.82rem;
  border-top:1px solid var(--sand)}
.pf-cmd-row .ref{font-weight:600; font-variant-numeric:tabular-nums}
.pf-cmd-row .dt{color:var(--ink); font-size:.76rem; margin-left:auto; font-variant-numeric:tabular-nums}
.pf-cmd-more{display:block; text-align:center; padding-top:9px; font-size:.78rem;
  color:var(--gold-press); text-decoration:none; font-weight:600}
.pf-cmd-more:hover{text-decoration:underline}
.pf-ev-head{display:flex; flex-wrap:wrap; gap:5px 9px; align-items:baseline; margin-bottom:2px}
.pf-ev-head b{font-size:.88rem; font-weight:600}
.pf-when{font-size:.75rem; color:var(--ink); font-variant-numeric:tabular-nums; margin-left:auto; white-space:nowrap}
.pf-meta{font-size:.75rem; color:var(--ink)}
.pf-body{
  font-size:.855rem; background:var(--white); border:1px solid var(--sand);
  border-radius:10px; padding:9px 11px; margin-top:6px; white-space:pre-wrap; line-height:1.55;
}
.pf-body.clamp{display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;overflow:hidden}
.pf-ev-acts{display:flex; gap:13px; margin-top:6px; flex-wrap:wrap}
.pf-ev-acts a,.pf-ev-acts button{
  font-size:.78rem; color:var(--gold-press); text-decoration:none; font-weight:600;
  background:none; border:none; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:4px;
}
.pf-ev-acts a:hover,.pf-ev-acts button:hover{text-decoration:underline}
.pf-ev-acts .mut{color:var(--ink); font-weight:500}
.pf-ev-acts .dgr{color:var(--error)}
.pf-ev-acts .ms{font-size:1em}

/* — Rail : coordonnées, séquence, client — */
.pf-kv{display:flex; gap:8px; align-items:flex-start; font-size:.855rem; padding:3px 0}
.pf-kv .ms{color:var(--gold-press); font-size:1.05em; flex:none; margin-top:2px}
.pf-kv a{color:var(--brown); text-decoration:none}
.pf-kv a:hover{color:var(--gold-press)}
.pf-links{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.pf-links a,.pf-ro{
  font-size:.75rem; text-decoration:none; color:var(--ink); border:1px solid var(--sand);
  border-radius:var(--r-pill); padding:3px 10px; display:inline-flex; align-items:center; gap:4px;
}
.pf-links a:hover{border-color:var(--gold-press); color:var(--gold-press)}
.pf-links .ms,.pf-ro .ms{font-size:1em}
.pf-thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px}
.pf-thumbs img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; border:1px solid var(--sand); cursor:zoom-in}
.pf-empty{font-size:.82rem; color:var(--ink); margin:0 0 10px}
.pf-note{font-size:.85rem; white-space:pre-wrap}

/* — Séquence : hauteur bornée quel que soit le nombre d'adresses — */
.pf-dots{display:inline-flex; gap:3px; flex:none}
.pf-dots i{width:6px; height:6px; border-radius:50%; background:var(--sand); display:block}
.pf-dots i.f{background:var(--gold-press)}
.pf-seqrow{display:flex; align-items:center; gap:9px; padding:5px 0; min-width:0}
.pf-seqrow .addr{font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0}
.pf-seqrow.lead .addr{font-weight:600; font-size:.8rem}
.pf-seqrow .mini{
  flex:none; border:1px solid var(--sand); background:var(--white); border-radius:50%;
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--gold-press); padding:0;
}
.pf-seqrow .mini:hover{border-color:var(--gold-press)}
.pf-seqrow .mini .ms{font-size:15px; vertical-align:0}
.pf-seqmore{border-top:1px solid var(--sand); margin-top:8px; padding-top:6px}
.pf-seqmore summary{
  cursor:pointer; font-size:.78rem; color:var(--ink); font-weight:600; list-style:none;
  display:flex; align-items:center; gap:6px; padding:2px 0;
}
.pf-seqmore summary::-webkit-details-marker{display:none}
.pf-seqmore summary .ms{font-size:1.05em; transition:transform .18s}
.pf-seqmore[open] summary .ms{transform:rotate(90deg)}
.pf-seqgroup{
  font-size:.76rem; color:var(--ink); background:color-mix(in srgb,var(--sand) 34%,transparent);
  border-radius:8px; padding:7px 10px; margin-top:6px; display:flex; align-items:center; gap:7px;
}
.pf-seqgroup .ms{font-size:1.05em; color:var(--st-quali); flex:none}

/* — Bandeau « envois automatiques coupés » : informer, ne pas griser — */
.pf-offband{
  font-size:.77rem; line-height:1.45; display:flex; gap:8px; align-items:flex-start;
  background:color-mix(in srgb,var(--st-relance) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--st-relance) 34%,transparent);
  border-radius:9px; padding:8px 10px; margin-bottom:10px;
}
.pf-offband .ms{font-size:1.1em; color:var(--st-relance); flex:none; margin-top:1px}

/* — Lien « toutes les photos » — */
.pf-morephotos{
  display:inline-flex; align-items:center; gap:5px; margin-top:7px; font-size:.76rem;
  color:var(--ink); text-decoration:none; cursor:zoom-in;
}
.pf-morephotos:hover{color:var(--gold-press)}
.pf-morephotos .ms{font-size:1.05em}

/* — Sélecteur de liste — */
.pf-b-first{background:color-mix(in srgb,var(--st-first) 17%,transparent); color:var(--st-first); border:1px solid color-mix(in srgb,var(--st-first) 38%,transparent)}
.pf-pick{display:inline-block}
.pf-pick-btn{font-family:var(--font-body); cursor:pointer}
.pf-pick-btn:hover{filter:brightness(.95)}
.pf-pick-chev{margin-left:2px; font-size:.95em; opacity:.65}
.pf-movepop{width:312px; padding:9px; border:1px solid var(--sand); border-radius:var(--r-card); box-shadow:var(--shadow-md)}
.pf-cap{font-size:.63rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); font-weight:600; padding:2px 6px 7px}
.pf-mv{
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px;
  cursor:pointer; font-size:.85rem; margin:0;
}
.pf-mv:hover{background:color-mix(in srgb,var(--sand) 38%,transparent)}
.pf-mv .ms{font-size:1.05em; color:var(--ink)}
.pf-mv .lb{flex:1}
.pf-mv .cur{font-size:.68rem; color:var(--ink); font-style:italic}
.pf-mv.is-cur{opacity:.6; cursor:default}
.pf-mv.is-cur:hover{background:none}
.pf-mv input[type=radio]{accent-color:var(--gold-press); margin:0}
.pf-pay{display:none; border-top:1px solid var(--sand); margin-top:7px; padding-top:9px}
.pf-pay.on{display:block}
.pf-lab2{font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:600; display:block; margin-bottom:3px}
.pf-plain{font-size:.79rem; color:var(--ink); margin:0}
.pf-warn{
  font-size:.79rem; color:var(--ink); background:color-mix(in srgb,var(--st-relance) 13%,transparent);
  border-radius:8px; padding:8px 10px; display:flex; gap:7px; align-items:flex-start;
}
.pf-warn .ms{font-size:1.05em; color:var(--st-relance); flex:none; margin-top:1px}
.pf-mv-foot{margin-top:10px}

/* — Édition en place : le champ ressemble à du texte tant qu'on ne le touche pas — */
.pf-ed{
  font-family:var(--font-body); font-size:.855rem; color:var(--brown); background:transparent;
  border:1px solid transparent; border-radius:7px; padding:3px 7px; margin:-3px -7px;
  width:calc(100% + 14px); min-width:0; resize:none; line-height:1.5; display:block;
  transition:background .12s var(--ease), border-color .12s var(--ease);
}
.pf-ed:hover{background:color-mix(in srgb,var(--sand) 42%,transparent); border-color:var(--sand); cursor:text}
.pf-ed:focus{outline:none; background:var(--white); border-color:var(--gold-press); box-shadow:var(--glow-gold)}
.pf-ed.is-dirty{background:color-mix(in srgb,var(--gold) 22%,transparent); border-color:var(--gold-press)}
.pf-ed::placeholder{color:var(--grey); opacity:.7}
textarea.pf-ed{overflow:hidden}
/* Le dossier est une liste fermée : le champ garde l'allure « texte au repos » des
   autres champs éditables, mais un chevron annonce qu'il se déroule. La flèche native
   trahirait la boîte grise d'un <select> et casserait l'alignement de la grille. */
select.pf-ed{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23575350'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 5px center; background-size:13px;
}
select.pf-ed:hover{background-color:color-mix(in srgb,var(--sand) 42%,transparent)}
select.pf-ed:focus{background-color:var(--white)}
select.pf-ed.is-dirty{background-color:color-mix(in srgb,var(--gold) 22%,transparent)}
.pf-ed-title{
  font-family:var(--font-display); font-size:1.28rem; font-weight:600; letter-spacing:.01em;
  width:auto; min-width:220px; max-width:38ch; display:inline-block;
}
.pf-edlab{
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  font-weight:600; display:block; margin:10px 0 2px;
}
.pf-card-b > .pf-edlab:first-of-type{margin-top:0}
.pf-g2{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
.pf-extra summary{
  cursor:pointer; font-size:.78rem; color:var(--ink); font-weight:600; list-style:none;
  display:flex; align-items:center; gap:6px; margin-top:12px; padding-top:9px;
  border-top:1px solid var(--sand);
}
.pf-extra summary::-webkit-details-marker{display:none}
.pf-extra summary:hover{color:var(--gold-press)}
.pf-extra summary .ms{font-size:1.05em; transition:transform .18s var(--ease)}
.pf-extra[open] summary .ms{transform:rotate(90deg)}

/* — Barre de sauvegarde — */
.pf-savebar{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,150%); z-index:1045;
  background:var(--brown); color:var(--lumiere); border-radius:var(--r-pill);
  box-shadow:0 10px 30px rgba(30,17,17,.34); padding:9px 11px 9px 20px;
  display:flex; align-items:center; gap:14px;
  transition:transform .26s var(--ease);
}
.pf-savebar.on{transform:translate(-50%,0)}
.pf-savebar .cnt{font-size:.84rem; white-space:nowrap}
.pf-savebar .cnt b{color:var(--gold)}
.pf-savebar .lnk{
  background:none; border:none; color:rgba(251,246,236,.72); font-family:var(--font-body);
  font-size:.8rem; cursor:pointer; padding:6px 4px; text-decoration:underline;
}
.pf-savebar .lnk:hover{color:var(--lumiere)}

/* — Largeur de lecture : container-fluid laisse la page s'étaler indéfiniment.
     Au delà de ~90 caractères par ligne, l'œil décroche en fin de ligne. — */
.pf-status, .pf-grid{max-width:1500px; margin-left:auto; margin-right:auto}
.pf-body{max-width:88ch}

/* — Tiroir d'écriture — */
.pf-scrim{
  position:fixed; inset:0; background:rgba(30,17,17,.34); z-index:1050;
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
}
.pf-scrim.on{opacity:1; pointer-events:auto}
.pf-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(600px,96vw); z-index:1055;
  background:var(--lumiere); border-left:1px solid var(--gold-press);
  box-shadow:-14px 0 40px rgba(30,17,17,.22);
  transform:translateX(100%); transition:transform .26s var(--ease);
  display:flex; flex-direction:column;
}
.pf-drawer.on{transform:none}
.pf-dr-head{
  padding:13px 17px; border-bottom:1px solid var(--sand); background:var(--white);
  display:flex; align-items:center; gap:9px; flex:none;
}
.pf-dr-head h2{font-family:var(--font-display); font-size:1rem; margin:0; font-weight:600; letter-spacing:.02em}
.pf-dr-head .who{font-size:.78rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pf-dr-body{padding:15px 17px 24px; overflow-y:auto; flex:1}
@media (prefers-reduced-motion:reduce){
  .pf-drawer,.pf-scrim,.pf-savebar{transition:none}
}

/* ── Création de prospect (`prospect/new.html.twig`) ──────────────────────────
   Un seul bloc « requis » en tête, encadré d'or ; les blocs facultatifs restent
   sur le fond clair habituel. La lecture doit répondre d'abord à « qu'est-ce que
   je DOIS remplir ? » avant « qu'est-ce que je PEUX remplir ? ». — */
.np-wrap{max-width:900px; margin:0 auto}
.np-head{margin-bottom:1.1rem}
.np-head h1{
  font-family:var(--font-display); font-size:1.18rem; font-weight:600; letter-spacing:.03em;
  margin:.25rem 0 .4rem; display:flex; align-items:center; gap:8px;
}
.np-head h1 .ms{color:var(--gold-press)}
.np-legend{font-size:.82rem; color:var(--ink); margin:0; max-width:70ch; line-height:1.55}

.np-sec{
  background:var(--lumiere); border:1px solid var(--sand); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:15px 17px 18px; margin-bottom:1rem;
}
.np-sec > h2{
  font-family:var(--font-display); font-size:.94rem; font-weight:600; letter-spacing:.03em;
  margin:0 0 13px; display:flex; align-items:center; gap:7px;
}
.np-sec > h2 .ms{color:var(--gold-press); font-size:1.15em}
.np-sec.req{border-color:var(--gold); background:var(--white)}

/* Pastilles : « Requis » en or plein, « Facultatif » en contour discret. */
.np-chip{
  margin-left:auto; font-family:var(--font-body); font-size:.66rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink);
  border:1px solid var(--sand); background:var(--white); border-radius:var(--r-pill); padding:2px 9px;
}
.np-chip.gold{background:var(--gold); border-color:var(--gold); color:var(--brown)}
.np-req{
  display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brown); background:var(--gold);
  border-radius:var(--r-pill); padding:1px 7px; vertical-align:1px;
}

.np-f > label{
  font-size:.78rem; font-weight:500; color:var(--ink); margin-bottom:3px;
  display:flex; align-items:center; gap:6px;
}
.np-hint{font-size:.72rem; color:var(--grey); margin-top:3px; line-height:1.4}
.np-err{display:none; font-size:.74rem; color:var(--error); margin-top:4px; align-items:flex-start; gap:4px}
.np-err .ms{font-size:1.05em; vertical-align:-3px}
.np-f.bad .np-err, .np-f:has(.is-invalid) .np-err{display:flex}
.np-f.bad .np-hint, .np-f:has(.is-invalid) .np-hint{display:none}
/* Bootstrap glisse une icône en fond et un rouge à lui : on garde la palette. */
.np-f .form-control.is-invalid, .np-f .form-select.is-invalid{
  border-color:var(--error); background-image:none; padding-right:.75rem;
}
.np-f .form-control.is-invalid:focus, .np-f .form-select.is-invalid:focus{
  box-shadow:0 0 0 .2rem rgba(220,53,69,.20);
}

/* Barre d'action collée en bas de la fenêtre : le formulaire est long, le bouton
   de création ne doit jamais demander de faire défiler pour être retrouvé. */
.np-bar{
  position:sticky; bottom:0; z-index:5; margin-top:1.1rem; padding:11px 14px;
  background:var(--white); border:1px solid var(--sand); border-radius:var(--r-card);
  box-shadow:0 -6px 18px rgba(30,17,17,.08);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.np-bar .st{font-size:.78rem; color:var(--error); margin-right:auto; font-weight:500}
.np-bar .st.ok{color:var(--ink); font-weight:400}

/* Alerte doublon : la fiche existante doit être atteignable avant de décider. */
.np-dup{
  border:1px solid var(--gold-press); background:var(--white); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:14px 16px; margin-bottom:1rem;
}
.np-dup h2{
  font-family:var(--font-display); font-size:.95rem; font-weight:600; margin:0 0 6px;
  display:flex; align-items:center; gap:7px;
}
.np-dup h2 .ms{color:var(--gold-press)}
.np-dup > p{font-size:.82rem; color:var(--ink); margin:0 0 11px}
.np-dup ul{list-style:none; margin:0; padding:0}
.np-dup li{border-top:1px solid var(--sand); padding:8px 0 0; margin-top:8px; font-size:.85rem}
.np-dup li:first-child{border-top:none; padding-top:0; margin-top:0}
.np-dup .who{font-weight:600; color:var(--brown)}
.np-dup .shared{font-size:.76rem; color:var(--ink); margin-top:2px}

/* — Triage « À qualifier » : les actions sur la carte, pour enchaîner sans ouvrir
     la fiche ni reperdre ses filtres. Le pied de carte devient une barre d'actions. — */
.cl-cards .ft.cl-triage{gap:6px; padding:9px 10px; flex-wrap:wrap}
.cl-cards .ft.cl-triage .btn{--bs-btn-padding-y:.18rem; --bs-btn-padding-x:.5rem; font-size:.76rem; white-space:nowrap}
.cl-cards .ft.cl-triage .btn .ms{font-size:1em; vertical-align:-2px; margin-right:2px}
.cl-cards .ft.cl-triage .btn-outline-danger .ms{margin-right:0}
.cl-cards .ft.cl-triage .cl-open{font-size:.78rem}
.filter-memo{display:flex;align-items:center;gap:5px;margin-top:-6px}
.filter-memo .ms{font-size:1.05em;color:var(--gold-press)}

/* — Pièces jointes ajoutées à la volée (tiroir d'écriture) — */
.pj-drop{
  display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
  border:2px dashed var(--sand); border-radius:var(--r-card); padding:14px 12px;
  background:var(--white); color:var(--ink); text-align:center;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.pj-drop:hover{border-color:var(--gold); background:var(--lumiere)}
.pj-drop.on{border-color:var(--gold-press); background:color-mix(in srgb,var(--gold) 14%,var(--white))}
.pj-drop .ms{font-size:1.5rem; color:var(--gold-press)}
.pj-drop .t{font-size:.82rem}
.pj-drop .h{font-size:.72rem; color:var(--grey)}
.pj-list{list-style:none; margin:7px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.pj-item{
  display:flex; align-items:center; gap:7px; font-size:.79rem;
  background:var(--white); border:1px solid var(--sand); border-radius:8px; padding:4px 6px 4px 8px;
}
.pj-item .ms{font-size:1.05em; color:var(--gold-press); flex:none}
.pj-item .n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pj-item .s{color:var(--grey); font-size:.73rem; white-space:nowrap}
.pj-item .x{border:none; background:none; color:var(--ink); font-size:1.15rem; line-height:1; cursor:pointer; padding:0 4px}
.pj-item .x:hover{color:var(--error)}
.pj-item.bad{border-color:var(--error)}
.pj-item.bad .s{color:var(--error)}
.pj-total{font-size:.74rem; color:var(--grey); padding-left:2px}
.pj-total.bad{color:var(--error); font-weight:600}

/* Pièces jointes dans l'historique : cliquables, entrantes comme sortantes. */
.pf-pj{
  display:inline-flex; align-items:center; gap:3px; margin-right:9px;
  color:var(--gold-press); text-decoration:none; border-bottom:1px solid transparent;
}
.pf-pj:hover{color:var(--brown); border-bottom-color:var(--gold)}
.pf-pj .ms{font-size:1em; vertical-align:-2px}

/* ── Saisie salon (`prospect/salon.html.twig`) ────────────────────────────────
   Reprend les blocs `.np-*` de la création de prospect ; seuls les éléments
   propres au stand sont définis ici. Pensé pour un téléphone tenu à une main. */
.sl-wrap{max-width:560px}
.sl-derive{
  margin-top:10px; display:flex; gap:9px; align-items:flex-start;
  background:#FAF3E6; border:1px solid var(--gold); border-radius:10px; padding:8px 10px;
}
.sl-bal{
  font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  background:var(--gold); color:var(--brown); border-radius:var(--r-pill);
  padding:2px 8px; flex:none; white-space:nowrap;
}
.sl-bal.none{background:transparent; border:1px solid var(--sand); color:var(--ink)}
.sl-dtx{font-size:.76rem; line-height:1.45}

.sl-switch{padding-left:2.6em}
.sl-switch .form-check-input{width:2.1em; height:1.1em; margin-left:-2.6em; cursor:pointer}
.sl-switch .form-check-label{font-weight:600; font-size:.88rem; cursor:pointer}

.sl-live{
  margin-top:11px; border-left:3px solid var(--gold); background:var(--white);
  border-radius:0 8px 8px 0; padding:8px 11px; font-size:.79rem; line-height:1.5;
}
.sl-live .c{
  font-family:ui-monospace,Menlo,monospace; background:#FAF3E6; border:1px solid var(--gold);
  border-radius:5px; padding:0 4px; font-size:.76rem;
}

/* La relance est un fait annoncé, pas un champ : elle ne ressemble pas à une saisie. */
.sl-suite{
  border:1px dashed var(--st-relance); background:#FDF8EC; border-radius:var(--r-card);
  padding:10px 13px; display:flex; gap:10px; align-items:flex-start; font-size:.8rem; line-height:1.5;
}
.sl-suite .ms{color:var(--st-relance); font-size:1.25em}

/* Confirmation : ce qu'on lit avant d'enchaîner sur le contact suivant. */
.sl-done{
  background:var(--white); border:1px solid var(--sand); border-radius:var(--r-card);
  box-shadow:var(--shadow-card); padding:19px 20px; margin-bottom:1.4rem;
}
.sl-tick{
  width:44px; height:44px; border-radius:50%; background:var(--st-win); color:#fff;
  display:grid; place-items:center; margin-bottom:11px;
}
.sl-tick .ms{font-size:1.5rem}
.sl-done h1{font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin:0 0 2px}
.sl-who{color:var(--ink); font-size:.84rem; margin:0 0 14px}
.sl-recap{list-style:none; margin:0 0 16px; padding:0}
.sl-recap li{
  display:flex; gap:9px; align-items:flex-start; padding:8px 0;
  border-bottom:1px solid var(--sand); font-size:.82rem; line-height:1.45;
}
.sl-recap li:last-child{border-bottom:none}
.sl-recap .ms{font-size:1.05em; flex:none; margin-top:1px}
.sl-recap .ms.ok{color:var(--st-win)}
.sl-recap .ms.warn{color:var(--error)}
.sl-acts{display:flex; gap:9px; flex-wrap:wrap}
.np-lab{font-size:.72rem; font-weight:500; color:var(--ink); margin:11px 0 3px; display:block}


/* ══ Notifications : la file des choses à traiter ═════════════════════════════ */

/* Cloche de la barre de navigation. Discrète au repos, dorée dès qu'il y a du travail. */
.nf-bell{position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--r-pill); color:var(--ink);
  border:1px solid transparent; text-decoration:none; transition:.15s var(--ease)}
.nf-bell:hover{background:var(--sand); color:var(--brown)}
.nf-bell.on{color:var(--gold-press); border-color:var(--gold)}
.nf-bell.actif{background:var(--gold); color:var(--brown); border-color:var(--gold)}
.nf-bell .ms{font-size:20px}
.nf-bell .n{position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:var(--r-pill); background:var(--due); color:#fff; font-size:.66rem;
  font-weight:700; display:flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--beige)}

.nf-wrap{max-width:1000px; margin:0 auto; padding:22px 16px 60px}
.nf-hd{border-bottom:1px solid var(--sand); padding-bottom:14px; margin-bottom:18px}
.nf-hd h1{font-family:var(--font-display); font-size:1.34rem; font-weight:600; letter-spacing:.03em;
  margin:0 0 6px; display:flex; align-items:center; gap:9px}
.nf-hd h1 .ms{color:var(--gold-press)}
.nf-hd p{margin:0; color:var(--ink); font-size:.85rem; max-width:74ch}

.nf-vide{display:flex; align-items:center; gap:14px; background:var(--lumiere);
  border:1px solid var(--sand); border-radius:var(--r-card); padding:26px 24px; color:var(--ink)}
.nf-vide .ms{font-size:34px; color:var(--gold)}

.nf-list{display:flex; flex-direction:column; gap:8px}
.nf-row{display:flex; align-items:center; gap:14px; background:var(--white);
  border:1px solid var(--sand); border-radius:var(--r-card); padding:11px 15px;
  box-shadow:var(--shadow-card)}
/* Ce qui traîne depuis 3 jours se signale : une réponse qui attend est une réponse qu'on perd. */
.nf-row.vieux{border-left:3px solid var(--due)}
.nf-row.fait{opacity:.62; box-shadow:none; background:var(--lumiere)}
.nf-ic{flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center}
.nf-ic.email_in{background:color-mix(in srgb,var(--st-first) 18%,transparent); color:var(--st-first)}
.nf-ic.call_in{background:color-mix(in srgb,var(--st-quali) 20%,transparent); color:var(--st-quali)}
.nf-ic .ms{font-size:18px}
.nf-body{flex:1; min-width:0}
.nf-t{font-weight:600; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.nf-t a{color:var(--brown); text-decoration:none}
.nf-t a:hover{color:var(--gold-press); text-decoration:underline}
.nf-k{font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink)}
.nf-d{font-size:.83rem; color:var(--ink); margin-top:2px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.nf-when{flex:none; text-align:right; font-size:.78rem; color:var(--ink);
  font-variant-numeric:tabular-nums}
.nf-when .age{font-size:.72rem; color:var(--grey)}
.nf-acts{flex:none; display:flex; align-items:center; gap:8px}
.nf-acts form{margin:0}
.nf-hist{margin-top:26px}
.nf-hist summary{cursor:pointer; font-size:.83rem; color:var(--gold-press); font-weight:600;
  margin-bottom:10px}

@media (max-width:760px){
  .nf-row{flex-wrap:wrap}
  .nf-when{text-align:left; width:100%; order:5}
  .nf-acts{width:100%; order:6; justify-content:flex-end}
}


/* ══ Page publique de désinscription ══════════════════════════════════════════
   Atteinte depuis un email, par quelqu'un qui n'a pas de compte : elle doit se
   suffire à elle-même, sans barre de navigation ni rien à chercher. */
.ud-body{margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--beige); color:var(--brown); font-family:var(--font-body); padding:24px}
.ud-card{background:var(--white); border:1px solid var(--sand); border-radius:var(--r-card);
  box-shadow:var(--shadow-md); padding:38px 34px; max-width:520px; width:100%; text-align:center}
.ud-logo{font-family:var(--font-display); font-size:.86rem; font-weight:600; letter-spacing:.22em;
  color:var(--gold-press); margin-bottom:26px}
.ud-card h1{font-family:var(--font-display); font-size:1.3rem; font-weight:600; letter-spacing:.02em;
  margin:0 0 14px; text-wrap:balance}
.ud-card p{margin:0 0 14px; font-size:.9rem; line-height:1.6; color:var(--ink)}
.ud-mail{font-weight:600; color:var(--brown); background:var(--lumiere); border:1px solid var(--sand);
  border-radius:var(--r-field); padding:11px 14px; word-break:break-all}
.ud-btn{background:var(--brown); color:var(--lumiere); border:none; border-radius:var(--r-pill);
  padding:.7rem 2rem; font-family:var(--font-body); font-size:.92rem; font-weight:600;
  cursor:pointer; transition:.15s var(--ease); margin:6px 0 4px}
.ud-btn:hover{background:var(--gold); color:var(--brown)}
.ud-note{font-size:.8rem; color:var(--grey)}
.ud-pied{margin-top:26px; padding-top:16px; border-top:1px solid var(--beige);
  font-size:.74rem; color:var(--grey)}
.ud-pied a{color:var(--gold-press); text-decoration:none}


/* ══ Overlay « une vente vient de sonner » ════════════════════════════════════
   Il couvre l'app entière, quelle que soit la page, et ne se voit qu'une fois. */
.vt-scrim{position:fixed; inset:0; z-index:1090; display:flex; align-items:center;
  justify-content:center; padding:20px; background:rgba(30,17,17,.66);
  opacity:0; transition:opacity .3s var(--ease)}
  /* Pas de `backdrop-filter` : le voile à 66 % suffit, le flou coûte du GPU sur une machine
     modeste et il empêche toute vérification par capture d'écran. */
.vt-scrim.on{opacity:1}
.vt{position:relative; background:var(--brown); border-radius:var(--r-card);
  padding:26px 24px 20px; box-shadow:0 18px 50px rgba(30,17,17,.45); overflow:hidden;
  max-width:520px; width:100%; transform:scale(.965); transition:transform .34s var(--ease)}
.vt-scrim.on .vt{transform:none}
/* Le halo qui monte du vitrage : la lumière derrière les lettres. */
.vt::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 118%, rgba(189,165,117,.22), transparent 62%)}

.vt-grid{display:grid; grid-template-columns:repeat(13,1fr); gap:2px 6px;
  max-width:440px; margin:0 auto 4px; position:relative; z-index:1}
.vt-grid span{font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  text-align:center; color:#3a2b2b; line-height:1.7; user-select:none;
  transition:color .34s var(--ease), text-shadow .34s var(--ease)}
.vt-grid span.on{color:var(--gold-hover);
  text-shadow:0 0 10px rgba(189,165,117,.75), 0 0 26px rgba(189,165,117,.34)}

.vt-multi{position:relative; z-index:1; text-align:center; margin-bottom:10px;
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--gold)}
.vt-detail{position:relative; z-index:1; text-align:center; margin-top:14px; opacity:0;
  transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.vt-detail.on{opacity:1; transform:none}
.vt-qui{font-family:var(--font-display); font-size:1.12rem; font-weight:600;
  color:var(--lumiere); letter-spacing:.02em}
.vt-quoi{font-size:.85rem; color:#b8a89f; margin-top:3px}
.vt-eur{display:inline-block; margin-top:11px; font-variant-numeric:tabular-nums;
  font-weight:700; font-size:.92rem; color:var(--brown); background:var(--gold);
  border-radius:var(--r-pill); padding:.24rem 1rem}
.vt-src{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#7a6a63;
  margin-top:12px}
.vt-ok{display:block; margin:16px auto 0; border:1px solid var(--gold); background:var(--gold);
  color:var(--brown); border-radius:var(--r-pill); padding:.44rem 1.6rem;
  font-family:var(--font-body); font-size:.85rem; font-weight:600; cursor:pointer;
  transition:.15s var(--ease)}
.vt-ok:hover{background:var(--gold-hover); border-color:var(--gold-hover)}
.vt-detail form{margin:0}

/* Compteur du mois, dans la barre d'onglets du suivi prospects uniquement. */
.mois-ca{display:inline-flex; align-items:center; gap:.5em; font-size:.78rem; font-weight:600;
  color:var(--gold-press); border:1px solid var(--gold); border-radius:var(--r-pill);
  padding:.24rem .8rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.mois-ca .ms{font-size:1.05em}
.mois-ca .sep{opacity:.45; font-weight:400; margin:0 .18em}

@media (max-width:620px){ .vt-grid{gap:1px 2px} .vt-grid span{font-size:.78rem} }
@media (prefers-reduced-motion:reduce){ .vt-scrim,.vt,.vt-grid span,.vt-detail{transition:none} }

/* ── Import de badges de salon (`salon_import.html.twig`) ───────────────────────
   L'aperçu doit se lire d'un coup d'œil sur un téléphone tenu à une main : les lignes
   déjà importées sont volontairement en retrait, seules les nouvelles ressortent. */
.si-tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.si-tag{
  font-size:.72rem; padding:3px 9px; border-radius:999px;
  background:var(--cream); border:1px solid var(--sand); color:var(--ink);
}
.si-tag.new{background:var(--gold); border-color:var(--gold); color:var(--brown); font-weight:500}
.si-tag.warn{background:#fdf1e3; border-color:#e8c9a0; color:#8a5a13}

/* Le tableau déborde sur mobile : il défile dans son propre cadre, jamais la page. */
.si-tablewrap{overflow-x:auto; border:1px solid var(--sand); border-radius:var(--r-card)}
.si-table{width:100%; font-size:.8rem; border-collapse:collapse; margin:0}
.si-table th{
  font-weight:500; font-size:.72rem; color:var(--grey); text-align:left;
  padding:8px 10px; background:var(--cream); white-space:nowrap;
}
.si-table td{padding:8px 10px; border-top:1px solid var(--sand); vertical-align:top}
.si-table .si-name{font-weight:500; color:var(--brown)}
.si-table .si-sub{color:var(--ink)}
.si-table tr.is-old{opacity:.6}

.si-badge{
  display:inline-block; font-size:.68rem; padding:2px 7px; border-radius:999px;
  background:var(--cream); border:1px solid var(--sand); color:var(--grey); white-space:nowrap;
}
.si-badge.new{background:var(--gold); border-color:var(--gold); color:var(--brown); font-weight:500}
.si-badge.link{background:#eaf1fb; border-color:#c3d7f0; color:#1b4f8a}

/* Un signalement n'est jamais avalé : il s'affiche en clair sous l'aperçu. */
.si-warn{
  display:flex; gap:6px; align-items:flex-start; margin:10px 0 0;
  font-size:.76rem; color:#8a5a13; line-height:1.45;
}
.si-warn .ms{font-size:1rem; flex:none}
.si-go{display:inline}

/* Vignette du salon : on montre ce qu'on remplace, à la taille où elle sera vue. */
.si-logorow{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap}
.si-logoimg{
  flex:none; width:64px; height:64px; border-radius:10px; object-fit:cover;
  border:1px solid var(--sand); background:var(--cream);
}
.si-logoimg.empty{display:grid; place-items:center; color:var(--grey)}
.si-logoimg.empty .ms{font-size:1.4rem}
.si-logotxt{flex:1 1 260px; min-width:0}
.si-logotxt p{font-size:.78rem; color:var(--ink); margin:0 0 8px; line-height:1.45}

/* Date de relance éditable : elle reste du texte tant qu'on ne la survole pas, comme les
   autres champs édités en place. Le crayon n'apparaît qu'au survol pour ne pas encombrer
   un bandeau déjà dense, mais la cible du clic, elle, est toujours là. */
.pf-relbtn{
  font-family:var(--font-body); background:transparent; border:1px solid transparent;
  border-radius:7px; padding:1px 6px; margin:0 -6px; cursor:pointer; display:inline-flex;
  align-items:center; gap:3px; line-height:1.35;
}
.pf-relbtn:hover, .pf-relbtn[aria-expanded="true"]{
  border-color:var(--sand); background:var(--white);
}
.pf-relpen{font-size:.9rem; opacity:0; transition:opacity .12s}
.pf-relbtn:hover .pf-relpen, .pf-relbtn[aria-expanded="true"] .pf-relpen{opacity:.6}
.pf-relpop{width:268px; padding:9px; border:1px solid var(--sand); border-radius:var(--r-card);
  box-shadow:var(--shadow-md)}

/* La date d'une relance est un bouton : elle ouvre la correction. Elle doit garder
   l'apparence exacte qu'elle avait en simple texte, sinon la liste se met à ressembler à une
   barre d'outils. Le crayon n'apparaît qu'au survol. */
.cl-rel button.when{
  font-family:var(--font-body); background:transparent; border:none;
  border-right:1px solid var(--beige); cursor:pointer; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.cl-rel button.when:hover{background:color-mix(in srgb,var(--sand) 26%,transparent)}
.cl-rel button.when .pen{
  position:absolute; top:2px; right:4px; font-size:.85rem; color:var(--grey);
  opacity:0; transition:opacity .12s;
}
.cl-rel button.when:hover .pen{opacity:.75}
.rm-who{font-size:.82rem; font-weight:600; color:var(--brown); margin:0 0 10px}

/* ── Onglet Clients (`clients/*.html.twig`, 13/09/2026) ─────────────────────────
   Blocs et formulaires repris de `.np-*` ; ce qui suit est propre aux clients. */
.ck-head, .ck-fhead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.ck-head h1, .ck-fhead h1{font-family:var(--font-display); font-size:1.25rem; font-weight:600; margin:0; display:flex; align-items:center; gap:6px}
.ck-tools{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ck-search input{width:250px; max-width:100%}
.ck-chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.ck-chip{font-size:.74rem; padding:3px 10px; border-radius:999px; border:1px solid var(--sand); color:var(--ink); text-decoration:none; background:var(--white)}
.ck-chip.on{background:var(--brown); border-color:var(--brown); color:var(--white)}
.ck-chip.vide{opacity:.55}
.ck-tablewrap{overflow-x:auto; border:1px solid var(--sand); border-radius:var(--r-card); background:var(--white)}
.ck-table{width:100%; min-width:620px; font-size:.84rem; border-collapse:collapse; margin:0}
.ck-table th{font-weight:500; font-size:.72rem; color:var(--grey); text-align:left; padding:8px 12px; background:var(--cream)}
.ck-table td{padding:9px 12px; border-top:1px solid var(--sand); vertical-align:top}
.ck-table .n{width:78px; font-variant-numeric:tabular-nums}
.ck-table .n a{color:var(--grey); text-decoration:none; font-family:ui-monospace,monospace; font-size:.78rem}
.ck-table .r{text-align:right; white-space:nowrap}
.ck-name{font-weight:600; color:var(--brown); text-decoration:none}
.ck-name:hover{text-decoration:underline}
.ck-sub{font-size:.76rem; color:var(--ink); margin:1px 0 0}
.ck-tag{font-size:.7rem; padding:1px 8px; border-radius:999px; border:1px solid var(--sand); color:var(--ink); white-space:nowrap}
.ck-tag.warn, .ck-badge.warn{background:#fdf1e3; border-color:#e8c9a0; color:#8a5a13}
.ck-badge{display:inline-block; font-size:.7rem; padding:2px 8px; border-radius:999px; border:1px solid var(--sand); color:var(--grey); white-space:nowrap}
.ck-badge.ok{background:#e9f4ea; border-color:#b9dcbc; color:#2f6b35}
.ck-badge.acc{background:#eaf1fb; border-color:#c3d7f0; color:#1b4f8a}
.ck-meta{font-size:.74rem; color:var(--grey); margin:0; font-family:ui-monospace,monospace}
.ck-badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.ck-ready{display:flex; gap:8px; align-items:flex-start; font-size:.82rem; border-radius:var(--r-card); padding:9px 12px; margin-bottom:12px; border:1px solid var(--sand)}
.ck-ready.ok{background:#e9f4ea; border-color:#b9dcbc; color:#2f6b35}
.ck-ready.warn{background:#fdf1e3; border-color:#e8c9a0; color:#8a5a13}
.ck-block > h2{display:flex; align-items:center; gap:6px}
.ck-edit{margin-left:auto; font-size:.74rem; background:transparent; border:1px solid var(--sand); border-radius:999px; padding:2px 10px; color:var(--ink); display:inline-flex; align-items:center; gap:3px; cursor:pointer}
.ck-edit .ms{font-size:.95rem}
.ck-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px 18px}
.ck-grid .wide{grid-column:1/-1}
.ck-grid .k{font-size:.68rem; color:var(--grey); margin:0 0 2px; text-transform:uppercase; letter-spacing:.06em}
.ck-grid .v{font-size:.86rem; margin:0; color:var(--brown)}
.mono{font-family:ui-monospace,monospace; font-size:.8rem}
.ck-vat{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ck-vat form{display:inline}
.ck-hint{font-size:.76rem; color:var(--grey); margin:0}
.ck-form, .ck-subform{margin-top:8px}
.ck-subform{border:1px dashed var(--sand); border-radius:var(--r-card); padding:10px 12px; margin-top:10px; background:var(--cream)}
.ck-formtitle{font-size:.78rem; font-weight:600; margin:0 0 6px}
.ck-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:10px}
.ck-radios{display:flex; gap:16px; font-size:.84rem}
.ck-radios label, .ck-check{display:inline-flex; gap:6px; align-items:flex-start; font-size:.82rem; font-weight:400; text-transform:none; letter-spacing:0}
.ck-inline{display:flex; gap:18px; flex-wrap:wrap}
.ck-err{display:flex; gap:4px; align-items:center; font-size:.74rem; color:var(--error); margin-top:3px}
.ck-err .ms{font-size:.9rem}
.ck-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px}
.ck-card{border:1px solid var(--sand); border-radius:var(--r-card); padding:9px 12px; background:var(--white); margin-bottom:8px}
.ck-cardline{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.ck-cardtools{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ck-cardtools form{display:inline}
.ck-strong{font-weight:600; margin:0; color:var(--brown)}
.ck-kind{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--grey); margin:0 0 4px; display:flex; align-items:center; gap:4px}
.ck-kind .ms{font-size:.9rem}
.ck-addr{font-size:.84rem; margin:0 0 6px}
.ck-link{background:none; border:none; padding:0; font-size:.76rem; color:var(--gold-press); cursor:pointer; text-decoration:underline}
.ck-link.danger{color:var(--error)}
.ck-empty p{margin:0; font-size:.85rem}

/* ── Onglet Produits (catalogue et stock) ────────────────────────────────────
   Réutilise .ck-* (blocs, tables, formulaires) ; ne sont définis ici que les
   éléments propres au stock. */
.pr-table td.r, .pr-table th.r{text-align:right; font-variant-numeric:tabular-nums}
.pr-table .pr-codes code{font-size:.76rem}
.pr-off{opacity:.6}
.pr-nostock{text-align:right; color:var(--grey); font-size:.78rem; font-style:italic}
.pr-dispo{font-weight:600}
/* Un disponible à zéro se remarque, sans crier : l'article reste vendable, il part en
   fabrication. Le rouge d'alerte dirait une panne là où il n'y a qu'une file d'attente. */
.pr-dispo.zero{color:var(--gold-press)}

.pr-solde{display:flex; flex-wrap:wrap; gap:22px; align-items:flex-end;
  background:var(--white); border:1px solid var(--sand); border-radius:var(--r-card);
  padding:14px 16px; margin-bottom:14px}
.pr-chiffre{display:flex; flex-direction:column; line-height:1.1}
.pr-chiffre .n{font-size:1.5rem; font-variant-numeric:tabular-nums}
.pr-chiffre.fort .n{font-size:2rem; font-weight:600}
.pr-chiffre .n.zero{color:var(--gold-press)}
.pr-chiffre .k{font-size:.72rem; color:var(--grey); margin-top:2px}
.pr-rappel{flex:1 1 260px; margin:0; font-size:.76rem; color:var(--grey)}

.pr-journal{min-width:680px}
.pr-journal td.r, .pr-journal th.r{text-align:right; font-variant-numeric:tabular-nums; width:92px}
.pr-move .ck-hint{display:block; margin-top:3px}

@media (max-width: 560px){
  .pr-solde{gap:16px}
  .pr-chiffre.fort .n{font-size:1.6rem}
}

/* Proposition de reprendre le nom officiel VIES. Ton neutre : c'est une offre, pas une alerte —
   la fiche n'a rien fait de mal en portant le nom sous lequel on a trouvé le contact. */
.ck-propose{display:flex; gap:10px; align-items:flex-start; margin-top:10px; padding:10px 12px;
  border:1px solid var(--sand); border-radius:var(--r-card); background:var(--cream)}
.ck-propose .ms{color:var(--gold-press); margin-top:1px}
.ck-propose .t{margin:0 0 3px; font-size:.85rem}
.ck-propose .d{margin:0 0 8px; font-size:.76rem; color:var(--grey)}

/* ── Facturation ─────────────────────────────────────────────────────────────
   Réutilise .ck-* ; ne sont ici que les éléments propres aux pièces. */
.fa-table td.r, .fa-table th.r{text-align:right; font-variant-numeric:tabular-nums}
.fa-avoir td:first-child{border-left:2px solid var(--gold-press)}
/* Le PDF depuis la liste : une colonne étroite, l'icône seule, ouverture dans un nouvel onglet. */
.fa-table td.fa-pdfcol, .fa-table th.fa-pdfcol{width:1%; text-align:center; white-space:nowrap}
.fa-pdflien{display:inline-flex; align-items:center; color:var(--grey); text-decoration:none}
.fa-pdflien:hover, .fa-pdflien:focus-visible{color:var(--gold-press)}
.fa-lignes td.r, .fa-lignes th.r{text-align:right; font-variant-numeric:tabular-nums}
.fa-totaux{width:72mm; margin-left:auto; margin-top:10px; border-collapse:collapse; font-size:.86rem}
.fa-totaux td{padding:3px 8px}
.fa-totaux .r{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.fa-totaux .tva td{color:var(--grey); font-size:.78rem}
.fa-totaux .ttc td{border-top:1px solid var(--ink); font-weight:600; font-size:1rem; padding-top:6px}
.fa-ajout{margin-top:14px; padding-top:12px; border-top:1px dashed var(--sand)}
/* L'émission est le seul geste irréversible de l'écran : le bloc le dit par sa bordure. */
.fa-emission{border-left:3px solid var(--gold-press)}
.fa-suppr{margin-top:8px}
.fa-lien{word-break:break-all; font-size:.74rem}

/* Pages publiques de facturation : mêmes codes que la désinscription (.ud-*), sur une carte
   un peu plus large parce qu'elles portent un tableau. */
.fp-card{max-width:560px}
.fp-recap{width:100%; border-collapse:collapse; margin:18px 0; font-size:.9rem}
.fp-recap td{padding:5px 0}
.fp-recap .r{text-align:right; font-variant-numeric:tabular-nums}
.fp-recap .ttc td{border-top:1px solid var(--ink); font-weight:600; font-size:1.05rem; padding-top:8px}
.fp-etat{font-size:.9rem; margin:0 0 16px}
.fp-etat.ok{color:var(--gold-press)}
.fp-actions{margin:18px 0}
.fp-btn{display:inline-block; padding:9px 20px; border:1px solid var(--ink); border-radius:999px;
  color:var(--ink); text-decoration:none; font-size:.84rem; letter-spacing:.04em}
.fp-btn:hover{background:var(--ink); color:var(--white)}
.fp-liste{width:100%; border-collapse:collapse; margin:18px 0; font-size:.86rem}
.fp-liste th{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--grey);
  text-align:left; padding:6px 0; border-bottom:1px solid var(--sand)}
.fp-liste td{padding:8px 0; border-bottom:1px solid var(--sand)}
.fp-liste .r{text-align:right; font-variant-numeric:tabular-nums}
.fp-sub{font-size:.72rem; color:var(--grey)}
.fp-pied{margin-top:22px}
.fa-apercu{margin:10px 0}
.fa-apercu summary{font-size:.78rem; color:var(--gold-press); cursor:pointer}
.fa-apercu pre{margin:8px 0 0; padding:10px 12px; background:var(--cream); border:1px solid var(--sand);
  border-radius:var(--r-card); font-size:.76rem; white-space:pre-wrap; font-family:inherit; color:var(--ink)}

/* ── Onglets de l'en-tête (14/09/2026) : un par métier ─────────────────────── */
.app-tabs .nav-link { white-space: nowrap; }
@media (min-width: 992px) {
  .app-tabs { align-self: stretch; }
  .app-tabs .nav-link { height: 100%; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; margin-bottom: -1px; }
}
@media (max-width: 991.98px) {
  .app-tabs .nav-link { border-bottom: 0; border-left: 3px solid transparent; }
  .app-tabs .nav-link.active { border-left-color: var(--gold); }
}
.app-user { display: inline-flex; align-items: center; gap: .3rem; max-width: 20ch; }
.app-user .ms { font-size: 1.1rem; color: var(--gold-press); }
.app-empty-elsewhere { margin-top: .6rem; font-size: .88rem; }
.app-empty-elsewhere a { font-weight: 600; }

/* ── Bibliothèque de pièces jointes, rangée par langue (14/09/2026) ───────────── */
.doc-menu { min-width: 20rem; max-height: 60vh; overflow-y: auto; padding: .4rem .6rem; }
.doc-grp + .doc-grp { border-top: 1px solid var(--beige); margin-top: .3rem; padding-top: .3rem; }
.doc-lang { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: .2rem 0 .15rem; display: flex; align-items: center; gap: .35rem; }
.doc-opt { display: flex; align-items: center; gap: .45rem; font-size: .84rem; padding: .18rem .1rem; cursor: pointer; border-radius: 6px; }
.doc-opt:hover { background: var(--lumiere); }
.doc-opt .form-check-input { margin: 0; flex: none; }
.doc-code { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .04em; padding: 0 .3rem; border-radius: 4px; background: var(--brown); color: var(--white); line-height: 1.45; }
.doc-chips { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.doc-chips:empty { display: none; }
.doc-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; background: var(--white); border: 1px solid var(--sand); border-radius: 999px; padding: .1rem .2rem .1rem .45rem; }
.doc-x { border: 0; background: none; padding: 0 .1rem; line-height: 1; color: var(--ink); }
.doc-x .ms { font-size: 1rem; vertical-align: -3px; }
.doc-x:hover { color: var(--brown); }

/* Copie (Cc) du tiroir d'écriture (15/09/2026) : le même composant que ci-dessus, avec deux
   états de plus. « Aucune autre adresse » est la vue NORMALE sur les 5 509 fiches qui n'en
   portent qu'une : elle explique le menu vide au lieu de laisser un trou. */
.cc-autre { border-top: 1px solid var(--beige); margin-top: .35rem; padding-top: .45rem; }
.cc-vide { font-size: .8rem; color: var(--grey); padding: .2rem .1rem; }
.cc-err { display: none; color: var(--error); font-size: .76rem; margin-top: .25rem; }
.cc-err.on { display: block; }

/* ── Commandes (lot 5, 14/09/2026) ─────────────────────────────────────────── */
.co-ref { font-size: .9rem; color: var(--ink); font-weight: 400; margin-left: .3rem; }
.co-gestes { white-space: nowrap; }
.co-gestes form { display: inline-block; margin-left: .3rem; }
.co-pieces { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.co-saisie .co-qte { max-width: 5.5rem; margin-left: auto; }
.co-saisie .co-prix { max-width: 8rem; margin-left: auto; }

/* Notifications métier (14/09/2026) */
.nf-ic.commande_retard{background:color-mix(in srgb,var(--st-late) 16%,transparent); color:var(--st-late)}
.nf-ic.facture_echue{background:color-mix(in srgb,var(--st-late) 16%,transparent); color:var(--st-late)}
.nf-ic.stock_ecart{background:color-mix(in srgb,var(--gold) 22%,transparent); color:var(--gold-press)}
.nf-ic.code_prescripteur{background:color-mix(in srgb,var(--st-win) 18%,transparent); color:var(--st-win)}