/* ============================================================
   Bilano CRM — design system (repris du vert Bilano / tickets.html)
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --vert: #059669; --vert-clair: #ecfdf5; --vert-fonce: #065f46; --vert-border: #6ee7b7;
  --gris-50: #f9fafb; --gris-100: #f3f4f6; --gris-200: #e5e7eb; --gris-300: #d1d5db;
  --gris-500: #6b7280; --gris-700: #374151; --gris-900: #111827;
  --rouge: #ef4444; --orange: #f59e0b; --bleu: #3b82f6;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f8faf9; color: #1a1a1a; }
[hidden] { display: none !important; }

/* ---- Repère environnement de test (G1) — hors production seulement ---- */
#test-banner { background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 12px, #fbbf24 12px, #fbbf24 24px); color: #422006; text-align: center; padding: 6px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; }

/* ---- Login ---- */
#login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { background: #fff; border-radius: 16px; padding: 40px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); max-width: 380px; width: 100%; text-align: center; }
.login-card h1 { font-size: 24px; color: var(--vert-fonce); margin-bottom: 4px; }
.login-card p { color: var(--gris-500); margin-bottom: 24px; font-size: 14px; }
.login-card input { width: 100%; padding: 12px 16px; border: 2px solid var(--gris-200); border-radius: 10px; font-size: 15px; outline: none; margin-bottom: 12px; transition: border 0.2s; }
.login-card input:focus { border-color: var(--vert); }
.pw-wrap { position: relative; }
.pw-toggle { position: absolute; right: 8px; top: 10px; background: none; border: none; cursor: pointer; font-size: 18px; padding: 4px; }
.login-error { color: var(--rouge); font-size: 13px; margin-top: 8px; display: none; }
.login-error.show { display: block; }

/* ---- Boutons ---- */
.btn-primary { padding: 12px 18px; background: var(--vert); color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn-primary:hover { background: var(--vert-fonce); }
.btn-ghost { background: none; border: 1px solid var(--gris-300); padding: 8px 14px; border-radius: 8px; font-size: 13px; color: var(--gris-700); cursor: pointer; }
.btn-ghost:hover { background: var(--gris-100); }
.btn-ghost.actif { background: var(--vert-clair); border-color: var(--vert-border); color: var(--vert-fonce); font-weight: 600; }
.btn-danger { background: none; border: 1px solid #fecaca; padding: 8px 14px; border-radius: 8px; font-size: 13px; color: var(--rouge); cursor: pointer; }
.btn-danger:hover { background: #fef2f2; }
.login-card .btn-primary { width: 100%; }

/* ---- Topbar ---- */
/* ---- En-tête : UN SEUL bloc collant (barre du haut + onglets) ----
   La barre d'onglets collait à « top: 65px », c'est-à-dire la hauteur de la
   barre du haut RECOPIÉE À LA MAIN. Elle en mesure 66, et la bannière de test
   décale l'ensemble : le nombre était déjà faux. En collant le bloc entier,
   il n'y a plus rien à tenir à jour. */
.entete { position: sticky; top: 0; z-index: 100; }
.topbar { background: #fff; border-bottom: 1px solid var(--gris-200); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { font-size: 20px; color: var(--vert-fonce); }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.badge-count { background: var(--vert); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; }

/* ---- Container / filtres ---- */
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
/* Ce qui FILTRE à gauche, ce qui AGIT à droite. Le groupe de gauche s'étire
   (la recherche mange l'espace) ; celui de droite reste collé au bord. */
.filters { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.filters-groupe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filters-groupe:first-child { flex: 1; min-width: 320px; }
.filters-groupe:last-child { flex-shrink: 0; }
.filters select, .filters input { padding: 10px 14px; border: 1px solid var(--gris-200); border-radius: 8px; font-size: 14px; background: #fff; outline: none; }
.filters select:focus, .filters input:focus { border-color: var(--vert); }
.filters input[type=text] { flex: 1; min-width: 200px; }

/* ---- Table fiches ---- */
.p-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.p-table th { background: var(--gris-50); padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gris-500); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--gris-200); }
.p-table td { padding: 12px 16px; border-bottom: 1px solid var(--gris-100); font-size: 14px; }
.p-table tr:hover td { background: var(--vert-clair); cursor: pointer; }
.p-table tr:last-child td { border-bottom: none; }
.p-nom { font-weight: 600; color: var(--gris-900); }
.p-sub { font-size: 12px; color: var(--gris-500); }

/* ---- Badges de statut ---- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.st-prospect { background: #eff6ff; color: #2563eb; }
.st-essai { background: #fffbeb; color: #d97706; }
.st-client { background: var(--vert-clair); color: var(--vert); }
.st-ancien_client { background: var(--gris-100); color: var(--gris-500); }

/* ---- Fiche ---- */
.back-btn { background: none; border: none; color: var(--vert); font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 16px; padding: 0; }
.back-btn:hover { text-decoration: underline; }
.fiche-header { background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.fiche-header h2 { font-size: 20px; margin-bottom: 6px; }
.fiche-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--gris-500); font-size: 13px; margin-top: 8px; }
.fiche-meta a { color: var(--vert); text-decoration: none; }
.fiche-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.fiche-actions label { font-size: 12px; font-weight: 600; color: var(--gris-500); }
.fiche-actions select { padding: 8px 12px; border: 1px solid var(--gris-200); border-radius: 8px; font-size: 13px; }
.fiche-notes { margin-top: 14px; padding: 12px 14px; background: var(--gris-50); border-radius: 8px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: var(--gris-700); }

/* ---- Panneau abonnement (Étage 2, lecture seule) ---- */
.abo-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px; background: #f0f9ff; border: 1px dashed #bae6fd; border-radius: 8px; font-size: 13px; }
.abo-panel.abo-vide { color: var(--gris-500); background: var(--gris-50); border-color: var(--gris-200); }
.abo-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gris-500); }
.abo-fin, .abo-sync { color: var(--gris-500); font-size: 12px; }
.badge.abo-actif { background: var(--vert-clair); color: var(--vert); }
.badge.abo-expire { background: var(--gris-100); color: var(--gris-500); }
.badge.abo-annulation_prevue { background: #fffbeb; color: #d97706; }
.badge.abo-impaye { background: #fef2f2; color: #dc2626; }
.badge.abo-inconnu { background: var(--gris-100); color: var(--gris-700); }

/* ---- Coordonnées / consentement LCAP (Étage 3) ---- */
.fiche-adr { margin-top: 8px; color: var(--gris-500); font-size: 13px; }
.fiche-lcap { margin-top: 10px; }
.lcap-tag { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 12px; font-weight: 600; }
.lcap-inconnu { background: var(--gris-100); color: var(--gris-500); }
.lcap-implicite { background: #eff6ff; color: #2563eb; }
.lcap-explicite { background: var(--vert-clair); color: var(--vert); }
.lcap-retire { background: #fef2f2; color: var(--rouge); }
.lcap-sep { margin: 18px 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris-500); border-top: 1px solid var(--gris-200); padding-top: 12px; }

/* ---- Rapport d'import de prospects (G6) ---- */
.imp-tiles { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.imp-tile { background: var(--gris-100); color: var(--gris-700); padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.imp-tile.ok { background: var(--vert-clair); color: var(--vert-fonce); }
.imp-err { color: var(--rouge); font-size: 13px; font-weight: 600; margin-top: 10px; }
.imp-errlist { margin: 6px 0 0 18px; font-size: 12px; color: var(--gris-700); }
.imp-deja, .imp-okban { background: var(--vert-clair); color: var(--vert-fonce); border: 1px solid var(--vert-border); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }

/* Rapport ligne par ligne (consentement à l'import, 8 août 2026).
   « Ramené à inconnu » est en ORANGE et jamais en rouge : ce n'est pas une
   erreur, c'est une fiche entrée sans preuve — un état parfaitement légitime. */
.imp-tile.ramene { background: #fffbeb; color: var(--orange); border: 1px solid #fde68a; }
/* Le fichier choisi, AVANT tout import : l'écran dit qu'il ne s'est rien passé. */
.imp-pret { background: var(--gris-50); border: 1px solid var(--gris-200); border-radius: 8px;
            padding: 8px 12px; font-size: 13px; color: var(--gris-700); margin-bottom: 8px; }
.imp-pret-sub { display: block; font-size: 12px; color: var(--gris-500); margin-top: 2px; }

/* L'avis de consentement — un AVERTISSEMENT, jamais un blocage. Orange, jamais
   rouge : rien n'est refusé, c'est l'utilisateur qui décide (8 août 2026). */
.cons-avis { margin-top: 8px; }
.cons-avis-l { background: #fffbeb; border-left: 3px solid var(--orange); border-radius: 0 6px 6px 0;
               padding: 7px 11px; font-size: 12.5px; line-height: 1.5; color: #92400e;
               margin-bottom: 5px; min-width: 0; overflow-wrap: anywhere; }
.fiche-lcap .cons-avis { max-width: 620px; }
.imp-lignes { max-height: 260px; overflow-y: auto; border: 1px solid var(--gris-200); border-radius: 8px; margin-top: 6px; }
.imp-ligne { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 6px 10px; font-size: 12px; border-bottom: 1px solid var(--gris-100); border-left: 3px solid var(--gris-200); }
.imp-ligne:last-child { border-bottom: none; }
.imp-ligne.a-creee { border-left-color: var(--vert); }
.imp-ligne.a-rapprochee { border-left-color: var(--bleu); }
.imp-ligne.a-erreur { border-left-color: var(--rouge); }
.imp-ligne.a-exclue, .imp-ligne.a-ignoree { border-left-color: var(--gris-300); }
.imp-ln { color: var(--gris-500); font-variant-numeric: tabular-nums; min-width: 34px; }
.imp-nom { font-weight: 600; color: var(--gris-700); }
.imp-act { color: var(--gris-500); }
.imp-preuve { color: var(--gris-500); min-width: 0; overflow-wrap: anywhere; }
.imp-motif { color: var(--orange); flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; }
.imp-ligne.a-erreur .imp-motif { color: var(--rouge); }

/* ---- Rapport d'ingestion des tickets (Étage 4) : écrit vs lu ----
   Les compteurs de LECTURE restent visibles (preuve que la passe a tout
   regardé) mais se distinguent à l'œil des ÉCRITURES. */
.tk-groupe { margin: 12px 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gris-500); }
.imp-tile.lu { background: transparent; border: 1px dashed var(--gris-300); color: var(--gris-500); font-weight: 500; }

/* ---- Journal d'activité (G4) ---- */
.jr-jour { margin-bottom: 20px; }
.jr-jour h3 { font-size: 14px; color: var(--vert-fonce); margin-bottom: 8px; border-bottom: 1px solid var(--gris-200); padding-bottom: 4px; }
.jr-item { display: flex; align-items: baseline; gap: 10px; padding: 6px 0 6px 12px; font-size: 14px; border-left: 3px solid var(--gris-200); margin-bottom: 2px; flex-wrap: wrap; }
.jr-item.t-relance { border-left-color: var(--orange); }
.jr-item.t-changement_statut { border-left-color: var(--vert); }
.jr-item.t-ticket { border-left-color: var(--bleu); }
.jr-heure { font-size: 12px; color: var(--gris-500); width: 44px; flex-shrink: 0; }
.jr-personne { color: var(--vert); text-decoration: none; font-weight: 600; }
.jr-personne:hover { text-decoration: underline; }
.jr-type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--gris-500); font-weight: 700; }
.jr-resume { color: var(--gris-700); }

/* ---- En-tête de colonne triable (G5) ---- */
.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--vert-fonce); }
.th-arrow { color: var(--vert); }

/* ---- Colonne « Prochaine relance » (G8) — même langage de couleurs que les relances ---- */
.pr-badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pr-retard { background: #fef2f2; color: var(--rouge); }
.pr-auj { background: #fffbeb; color: var(--orange); }
.pr-avenir { background: #eff6ff; color: var(--bleu); }
.pr-vide { color: var(--gris-300); }

/* ---- Timeline ---- */
.timeline-head { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 12px; }
.timeline-head h3 { font-size: 15px; color: var(--gris-700); }
.timeline { display: flex; flex-direction: column; gap: 10px; }
.tl-item { background: #fff; border-radius: 12px; padding: 14px 18px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); border-left: 3px solid var(--gris-200); }
.tl-item.t-ticket { border-left-color: var(--bleu); }
.tl-item.t-note { border-left-color: var(--gris-300); }
.tl-item.t-changement_statut { border-left-color: var(--vert); }
.tl-item.t-relance { border-left-color: var(--orange); }
.tl-item.t-courriel_sortant, .tl-item.t-courriel_entrant { border-left-color: var(--vert-border); }
.tl-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--gris-500); margin-bottom: 4px; }
.tl-type { font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; font-size: 11px; color: var(--gris-700); }
.tl-resume { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.tl-contenu { font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--gris-700); }

/* ---- Brouillon Haiku attaché au message du client (Étage 4) ----
   Replié par défaut : la ligne de vie reste lisible, le brouillon est à un clic.
   <details> natif = aucun handler JS (CSP stricte). */
.tl-brouillon { margin-top: 10px; border-top: 1px dashed var(--gris-200); padding-top: 8px; }
.tl-brouillon > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--vert-fonce); text-transform: uppercase; letter-spacing: 0.3px; list-style: none; }
.tl-brouillon > summary::-webkit-details-marker { display: none; }
.tl-brouillon > summary::before { content: '▸ '; color: var(--vert); }
.tl-brouillon[open] > summary::before { content: '▾ '; }
.tl-brouillon-corps { margin-top: 8px; padding: 10px 12px; background: var(--vert-clair); border-left: 3px solid var(--vert-border); border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--vert-fonce); }

/* ---- Contacts de support hors entonnoir (Étage 4) ---- */
.badge.bd-support { background: #eef2ff; color: #4f46e5; }
.ent-panel { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 10px; padding: 8px 12px; }
.ent-panel.ent-dans { background: var(--gris-50); border-color: var(--gris-200); }
.ent-note { font-size: 12px; color: var(--gris-700); }
.rap-hors { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--gris-200); font-size: 13px; font-weight: 600; color: #4f46e5; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--gris-500); }

/* ---- Modales ---- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.active { display: flex; }
.modal { background: #fff; border-radius: 16px; padding: 28px; max-width: 560px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.15); max-height: 90vh; overflow-y: auto; }
.modal h2 { font-size: 18px; color: var(--vert-fonce); margin-bottom: 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--gris-500); margin-bottom: 4px; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--gris-200); border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--vert); }
.field textarea { resize: vertical; min-height: 80px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ---- Onglets (Étage 3) ---- */
.tabbar { background: #fff; border-bottom: 1px solid var(--gris-200); padding: 0 24px; display: flex; gap: 4px; }

/* ⛔ Une règle « @media (max-height: 500px) { .entete { position: static } } »
   a été essayée ici le 8 août puis RETIRÉE avant d'être livrée : la mesure a
   montré qu'à 333 px de haut elle faisait disparaître l'en-tête au défilement
   — c'est-à-dire qu'elle FABRIQUAIT le symptôme qu'on cherchait à expliquer.
   Un en-tête reste atteignable à toute hauteur. Ne pas la remettre. */
.tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--gris-500); cursor: pointer; }
.tab:hover { color: var(--vert-fonce); }
.tab.actif { color: var(--vert-fonce); border-bottom-color: var(--vert); }

/* ---- Relances : Aujourd'hui + panneau fiche ---- */
.rel-section { margin-bottom: 24px; }
.rel-section h3 { font-size: 15px; color: var(--gris-700); margin-bottom: 10px; }
.rel-item { background: #fff; border-radius: 12px; padding: 14px 18px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); border-left: 3px solid var(--gris-300); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
/* Langage de couleurs des états (le même partout) : retard=rouge, aujourd'hui=orange, à venir=bleu */
.rel-etat-retard h3 { color: var(--rouge); }
.rel-etat-retard .rel-item { border-left-color: var(--rouge); }
.rel-etat-auj h3 { color: var(--orange); }
.rel-etat-auj .rel-item { border-left-color: var(--orange); }
.rel-etat-avenir h3 { color: var(--bleu); }
.rel-etat-avenir .rel-item { border-left-color: var(--bleu); }
.rel-main { flex: 1; min-width: 0; }
.rel-personne-line { margin-bottom: 4px; }
.rel-personne { color: var(--vert); text-decoration: none; font-weight: 600; }
.rel-personne:hover { text-decoration: underline; }
.rel-objet { font-weight: 600; font-size: 14px; margin: 2px 0; }
.rel-date { margin-top: 2px; }
.rel-sugg-tag { display: inline-block; background: #f0f9ff; color: #0369a1; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.rel-actions { display: flex; gap: 6px; flex-shrink: 0; }
.rel-panel { background: #fff; border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.rel-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rel-panel-head h3 { font-size: 15px; color: var(--gris-700); }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---- Rapports de conversion ---- */
.rapports-filtres { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; font-size: 13px; color: var(--gris-500); }
.rapports-filtres input { padding: 8px 10px; border: 1px solid var(--gris-200); border-radius: 8px; font-size: 13px; }
.rap-card { background: #fff; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.rap-card h3 { font-size: 15px; color: var(--gris-700); margin-bottom: 16px; }
.funnel-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.funnel-label { width: 130px; font-size: 13px; color: var(--gris-700); flex-shrink: 0; }
.funnel-track { flex: 1; background: var(--gris-100); border-radius: 8px; height: 22px; overflow: hidden; }
.funnel-bar { height: 100%; border-radius: 8px; min-width: 2px; transition: width 0.3s; }
.funnel-bar.f-prospect { background: var(--bleu); }
.funnel-bar.f-essai { background: var(--orange); }
.funnel-bar.f-client { background: var(--vert); }
.funnel-bar.f-ancien { background: var(--gris-300); }
.funnel-n { width: 40px; text-align: right; font-weight: 700; font-size: 14px; color: var(--gris-900); flex-shrink: 0; }
.rap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat-tile { background: var(--gris-50); border-radius: 10px; padding: 14px 16px; text-align: center; }
.stat-val { font-size: 22px; font-weight: 700; color: var(--vert-fonce); }
.stat-label { font-size: 12px; color: var(--gris-500); margin-top: 4px; }

@media (max-width: 768px) {
  .container { padding: 16px; }
  .filters { flex-direction: column; }
  .grid2 { grid-template-columns: 1fr; }
  .p-table th:nth-child(3), .p-table td:nth-child(3) { display: none; }
  .rel-item { flex-direction: column; }
  .rel-actions { align-self: flex-end; }
  .funnel-label { width: 92px; }
}

/* ============================================================
   Paramètres — identité d'envoi (Étage 5)
   ============================================================ */
.param-page { max-width: 760px; }
.param-titre { font-size: 22px; color: var(--vert-fonce); margin-bottom: 4px; }
.param-intro { color: var(--gris-500); font-size: 14px; margin-bottom: 20px; }
.param-carte { background: #fff; border: 1px solid var(--gris-200); border-radius: 14px; padding: 22px 24px; box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.param-carte-titre { font-size: 17px; color: var(--gris-900); margin-bottom: 8px; }
.param-sous-titre { font-size: 13px; font-weight: 700; color: var(--vert-fonce); text-transform: uppercase; letter-spacing: 0.4px; margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--gris-100); }
.param-note { font-size: 13px; color: var(--gris-700); line-height: 1.5; background: var(--vert-clair); border: 1px solid var(--vert-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; }
.param-note-sec { font-size: 12px; color: var(--gris-500); margin-top: 6px; }
.param-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.param-champ { display: flex; flex-direction: column; }
.param-col-2 { grid-column: 1 / -1; }
.param-champ label { font-size: 12px; font-weight: 600; color: var(--gris-700); margin-bottom: 5px; }
.param-champ input, .param-champ select, .param-champ textarea { padding: 10px 12px; border: 1px solid var(--gris-200); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; outline: none; width: 100%; }
.param-champ input:focus, .param-champ select:focus, .param-champ textarea:focus { border-color: var(--vert); }
.param-etat { color: var(--vert); font-weight: 700; font-size: 11px; }
.param-effacer { margin-top: 8px; align-self: flex-start; }
.param-avert { font-size: 12px; color: var(--gris-700); line-height: 1.5; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; margin-top: 14px; }
.param-actions { display: flex; gap: 12px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.param-resultat { margin-top: 14px; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.param-resultat-ok { background: var(--vert-clair); border: 1px solid var(--vert-border); color: var(--vert-fonce); }
.param-resultat-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.param-resultat-attente { background: var(--gris-50); border: 1px solid var(--gris-200); color: var(--gris-700); }
.param-alerte { font-size: 13px; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px; margin-top: 14px; }
@media (max-width: 640px) { .param-grille { grid-template-columns: 1fr; } }

/* ============================================================
   ENVOI EN LOT (Étage 5 lot 2)
   ============================================================ */
.th-coche, .td-coche { width: 34px; text-align: center; }
.td-coche input, .th-coche input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--vert); }

.env-tete { margin-bottom: 16px; }
.env-tete h2 { font-size: 20px; color: var(--vert-fonce); }
.env-carte { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.04); margin-bottom: 16px; }
.env-carte h3 { font-size: 15px; color: var(--gris-700); margin-bottom: 12px; }
.env-aide code { background: var(--gris-100); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.env-ecartes .env-raison { color: var(--rouge); font-size: 13px; text-align: right; }

.env-dest { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start;
            padding: 10px 0; border-bottom: 1px solid var(--gris-100); }
.env-dest:last-child { border-bottom: none; }
.env-ligne { width: 100%; padding: 9px 11px; border: 1px solid var(--gris-200); border-radius: 8px;
             font-size: 14px; font-family: inherit; resize: vertical; outline: none; }
.env-ligne:focus { border-color: var(--vert); }
.env-manque { color: var(--orange); font-weight: 600; }
.env-pret { color: var(--vert); font-weight: 600; }

.env-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.env-barre { height: 10px; background: var(--gris-100); border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.env-barre-in { height: 100%; background: var(--vert); transition: width .4s; }

.badge.env-st-brouillon { background: var(--gris-100); color: var(--gris-700); }
.badge.env-st-en_cours  { background: #eff6ff; color: var(--bleu); }
.badge.env-st-termine   { background: var(--vert-clair); color: var(--vert); }
.badge.env-st-arrete    { background: #fef2f2; color: var(--rouge); }
.badge.env-d-envoye     { background: var(--vert-clair); color: var(--vert); }
.badge.env-d-a_envoyer  { background: var(--gris-100); color: var(--gris-500); }
.badge.env-d-ecarte     { background: #fffbeb; color: #d97706; }
.badge.env-d-echec      { background: #fef2f2; color: var(--rouge); }
.imp-tile.env-echec     { background: #fef2f2; color: var(--rouge); border: 1px solid #fecaca; }

/* ---- Paramètres : résumé de l'identité (addenda du 5 août) ---- */
.param-resume { margin-bottom: 18px; }
.param-etat-ok { background: var(--vert-clair); border: 1px solid var(--vert-border); color: var(--vert-fonce);
                 border-radius: 8px; padding: 10px 14px; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.param-etat-vide { background: var(--gris-50); border: 1px solid var(--gris-200); color: var(--gris-700);
                   border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; }
.param-resume-liste { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; font-size: 14px; }
.param-resume-liste dt { color: var(--gris-500); font-size: 12px; font-weight: 600;
                         text-transform: uppercase; letter-spacing: .3px; padding-top: 2px; }
.param-resume-liste dd { color: var(--gris-900); }
.param-alerte-lot { margin-top: 12px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
                    border-radius: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.param-requis { color: var(--rouge); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 11px; }

/* ---- Aperçu d'un message monté (Étage 5 lot 2) ---- */
.modal-large { max-width: 760px; }
.apercu-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px;
              padding-bottom: 12px; border-bottom: 1px solid var(--gris-200); margin-bottom: 14px; }
.apercu-qui { font-weight: 600; color: var(--gris-900); font-size: 14px; text-align: center; flex: 1; }
.apercu-sujet { background: var(--gris-50); border-radius: 8px; padding: 10px 14px; font-size: 14px;
                font-weight: 600; margin-bottom: 12px; }
.apercu-etiq { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--gris-500);
               font-weight: 700; margin-right: 8px; }
.apercu-corps { border: 1px solid var(--gris-200); border-radius: 10px; padding: 20px; background: #fff; }
.apercu-corps a { color: var(--vert); }
.apercu-texte { margin-top: 14px; }
.apercu-texte > summary { cursor: pointer; font-size: 12px; color: var(--gris-500); font-weight: 600; }
.apercu-texte pre { margin-top: 10px; background: var(--gris-50); border-radius: 8px; padding: 14px;
                    font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--gris-700); }
.apercu-note { margin-top: 12px; }
.env-identique { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 8px;
                 padding: 10px 14px; font-size: 13px; font-weight: 600; }

/* ---- Composeur refondu : l'écran d'un courriel normal (5 août, soir) ----
   Une seule option visible. Pas d'exemple, pas de jeton, pas d'accolade. */
.env-option { display: flex; align-items: center; gap: 10px; cursor: pointer;
              padding: 12px 14px; background: var(--gris-50); border: 1px solid var(--gris-200);
              border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--gris-900); }
.env-option:hover { background: var(--vert-clair); border-color: var(--vert-border); }
.env-option input { width: 17px; height: 17px; accent-color: var(--vert); cursor: pointer; }
.env-option-note { margin: 8px 0 0 4px; }
.env-carte .field textarea, .env-carte .field input[type=text] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--gris-200); border-radius: 8px;
  font-size: 15px; font-family: inherit; outline: none; line-height: 1.6; }
.env-carte .field textarea:focus, .env-carte .field input[type=text]:focus { border-color: var(--vert); }

/* ---- Colonne Statut : largeur stable ----
   Le badge « Support » n'apparaît que sur certaines lignes ; sans largeur
   fixe, il décale les colonnes d'une rangée à l'autre.

   6 août 2026 — La règle du 5 août visait nth-child(2), c'est-à-dire NOM :
   la colonne de cases à cocher (.th-coche, arrivée avec l'envoi en lot) est
   la première, elle décale tout d'un cran. Statut est la TROISIÈME colonne.
   Le badge continuait donc de pousser les colonnes, et Nom se retrouvait
   figé à 190px avec nowrap — l'inverse de ce qu'on voulait.
   Ordre réel : 1 cases · 2 Nom · 3 Statut · 4 Coordonnées · 5 Prochaine
   relance · 6 Dernière activité. */
.p-table th:nth-child(3), .p-table td:nth-child(3) { width: 190px; white-space: nowrap; }
.env-pied-note { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--gris-200); }

/* Les deux champs du pied annoncent leur statut au premier regard :
   l'adresse postale est un verrou (rouge), le texte libre ne l'est pas (neutre). */
.param-bascule { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
                 font-size: 14px; color: var(--gris-700); font-weight: 600; }
.param-bascule input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--vert); cursor: pointer; }
.param-facultatif { color: var(--gris-500); font-weight: 600; text-transform: none;
                    letter-spacing: 0; font-size: 11px; }
/* La note d'un champ ne doit pas coller au libellé du champ suivant. */
.param-champ .param-note-sec { margin-bottom: 18px; }

/* ---- Le logo de l'utilisateur (7 août 2026) ----
   Un bouton, une vignette, un retrait. Le bloc vit SOUS l'aperçu du pied : le
   réglage et son effet se regardent d'un seul coup d'œil. */
.param-logo { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gris-100); }
.param-logo-rangee { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.param-logo-vignette { width: 84px; height: 40px; display: flex; align-items: center;
                       justify-content: center; border: 1px solid var(--gris-200);
                       border-radius: 8px; background: #fff; padding: 4px; flex-shrink: 0; }
.param-logo-vignette img { max-width: 100%; max-height: 100%; display: block; }
.param-logo .param-note-sec { margin-top: 10px; margin-bottom: 0; }
.param-logo .param-resultat { margin-top: 12px; }

/* ---- Aperçu du pied : une carte à part, visible même formulaire replié ---- */
.param-apercu-carte { margin-top: 18px; }
.param-apercu-cadre { margin-top: 12px; border: 1px solid var(--gris-200); border-radius: 10px;
                      padding: 18px 20px; background: #fff; }
.param-apercu-faux { color: var(--gris-300); font-style: italic; font-size: 15px; }
.param-apercu-modifie { margin-top: 12px; background: #eff6ff; border: 1px solid #bfdbfe;
                        color: #1e40af; border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.param-apercu-carte .apercu-texte { margin-top: 12px; }
.param-apercu-carte .imp-errlist { margin: 6px 0 0 18px; font-size: 13px; }

/* ---- Écrire au lot depuis Aujourd'hui / À venir ---- */
.rel-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             margin-bottom: 14px; min-height: 34px; }
.rel-barre-actions { display: flex; align-items: center; gap: 8px; }
.rel-tout { display: flex; align-items: center; gap: 8px; cursor: pointer;
            font-size: 13px; color: var(--gris-500); font-weight: 600; }
.rel-tout input { width: 16px; height: 16px; accent-color: var(--vert); cursor: pointer; }
.rel-coche { width: 16px; height: 16px; accent-color: var(--vert); cursor: pointer;
             margin-right: 12px; margin-top: 3px; flex-shrink: 0; }

/* ---- Après l'envoi : proposer de marquer les relances faites (jamais imposer) ---- */
.env-rel-panneau { border-left: 3px solid var(--gris-300); }
.env-rel-tout { margin: 12px 0 6px; }
.env-rel-ligne { display: grid; grid-template-columns: 20px 200px 1fr auto; gap: 12px;
                 align-items: center; padding: 9px 0; border-bottom: 1px solid var(--gris-100);
                 cursor: pointer; font-size: 14px; }
.env-rel-ligne:last-of-type { border-bottom: none; }
.env-rel-coche { width: 16px; height: 16px; accent-color: var(--vert); cursor: pointer; }
.env-rel-qui { font-weight: 600; color: var(--gris-900); }
.env-rel-objet { color: var(--gris-700); }
.env-rel-date { font-size: 12px; color: var(--gris-500); white-space: nowrap; }
.env-rel-date.env-rel-retard { color: var(--rouge); font-weight: 600; }
.env-rel-tronque { margin-top: 10px; }

/* ============================================================
   LA VUE D'ATTENTION + LA RÉPONSE AU CLIENT (7 août 2026)
   ============================================================ */
/* Compteur dans la barre du haut : ce qui presse se voit depuis tous les onglets. */
.badge-attention { background: var(--rouge); color: #fff; border: none; padding: 5px 13px;
                   border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer; }
.badge-attention:hover { background: #dc2626; }

.att-bloc { background: #fff; border: 1px solid var(--gris-200); border-left: 4px solid var(--orange);
            border-radius: 12px; padding: 16px 20px; margin-bottom: 20px;
            box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.att-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.att-tete h3 { font-size: 16px; color: var(--gris-900); }
.att-vide { color: var(--gris-500); font-size: 13px; padding: 10px 14px; background: var(--gris-50);
            border: 1px solid var(--gris-200); border-radius: 8px; margin-bottom: 20px; }
.att-item { display: grid; grid-template-columns: 200px 1fr 110px auto; gap: 14px; align-items: center;
            padding: 12px 0; border-bottom: 1px solid var(--gris-100); }
.att-item:last-child { border-bottom: none; }
/* Un enfant de grille vaut `min-width: auto` par défaut : il REFUSE de
   rétrécir sous son contenu le plus étroit. Une adresse courriel n'offre aucun
   point de césure (le navigateur ne coupe ni au « @ » ni au « . »), donc elle
   débordait de sa colonne et venait peindre par-dessus le sujet — mesuré à
   54 px avec « comptabilite.gendrondistribution@gmail.com ». Les deux lignes
   ci-dessous sont nécessaires ensemble : la première autorise la colonne à
   contraindre, la seconde autorise le mot à se couper. */
.att-item > * { min-width: 0; }
.att-qui, .att-quoi { overflow-wrap: anywhere; word-break: break-word; }
.att-sujet { font-weight: 600; color: var(--gris-900); font-size: 14px; }
.att-extrait { margin-top: 3px; }
.att-quand { font-size: 12px; font-weight: 600; text-align: right; }
.att-actions { display: flex; gap: 8px; }
.att-jour   { color: var(--bleu); }
.att-hier   { color: var(--orange); }
.att-retard { color: var(--rouge); }
.att-item.att-retard { background: #fff8f8; }

/* La zone de réponse — le geste avant l'historique. */
.rep-carte { background: #fff; border: 1px solid var(--gris-200); border-radius: 12px;
             padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.rep-tete { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.rep-tete h3 { font-size: 16px; color: var(--vert-fonce); }
#rep-corps { width: 100%; padding: 12px 14px; border: 1px solid var(--gris-200); border-radius: 8px;
             font-size: 15px; font-family: inherit; line-height: 1.6; outline: none; resize: vertical; }
#rep-corps:focus { border-color: var(--vert); }
.rep-note { margin-top: 8px; }
.rep-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.rep-appuis-ok { background: var(--vert-clair); border: 1px solid var(--vert-border); color: var(--vert-fonce);
                 border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-top: 10px; }
#rep-appuis:not(:empty), #rep-resultat:not(:empty) { margin-top: 10px; }

/* Identité du support : visuellement distincte de l'identité de démarchage. */
.param-carte-support { margin-top: 18px; border-left: 4px solid var(--bleu); }
.param-agent { margin-top: 14px; }

/* Ce que l'agent a appris. */
.pr-bloc { margin-top: 12px; }
.pr-item { border: 1px solid var(--gris-200); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
.pr-item > summary { cursor: pointer; font-size: 14px; }
.pr-sujet { font-weight: 600; color: var(--gris-900); }
.pr-corps { margin-top: 10px; }
.pr-etiq { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
           color: var(--gris-500); margin-top: 10px; }
.pr-texte { font-size: 13px; line-height: 1.6; color: var(--gris-700); white-space: pre-wrap;
            background: var(--gris-50); border-radius: 6px; padding: 10px 12px; margin-top: 4px; }
.pr-corps .btn-danger { margin-top: 12px; }

@media (max-width: 760px) {
  .att-item { grid-template-columns: 1fr; gap: 6px; }
  .att-quand { text-align: left; }
}

/* ============================================================
   LE CHOIX SOBRE / HABILLÉ (7 août 2026)
   Deux cases côte à côte, le choix se voit. Pas de texte de mise en garde :
   l'utilisateur décide selon à qui il écrit.
   ============================================================ */
.env-modes { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.env-mode { flex: 1; min-width: 200px; display: flex; align-items: flex-start; gap: 10px;
            padding: 12px 14px; border: 1px solid var(--gris-200); border-radius: 10px;
            background: #fff; cursor: pointer; }
.env-mode:hover { border-color: var(--vert-border); }
.env-mode.actif { border-color: var(--vert); background: var(--vert-clair); }
.env-mode input { width: 17px; height: 17px; accent-color: var(--vert); cursor: pointer; margin-top: 1px; }
.env-mode span { display: flex; flex-direction: column; gap: 2px; }
.env-mode strong { font-size: 14px; color: var(--gris-900); }
.env-mode em { font-style: normal; font-size: 12px; color: var(--gris-500); }
.rep-modes { margin: 12px 0 0; }
/* 10 août 2026 : les deux modes portent maintenant leur description (elle
   existait au lot, pas ici). La compaction `flex:0 0 auto` écrasait la seconde
   ligne — on rend la largeur au texte, comme au composeur de lot. */
.rep-modes .env-mode { flex: 1; min-width: 190px; padding: 8px 14px; align-items: flex-start; }

/* Écarter (10 août 2026) : le geste se distingue de « Sans réponse », et un
   message écarté se voit dans la ligne de vie — avec sa porte de retour. */
.att-legende { margin: 6px 0 12px; line-height: 1.6; }
.att-ecarter { color: #b45309; border-color: #fde68a; }
.att-ecarter:hover { background: #fffbeb; }
.tl-ecarte { opacity: 0.72; }
.tl-ecarte-bandeau { margin: 6px 0 0; padding: 7px 10px; border-radius: 7px;
                     background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
                     font-size: 12px; display: flex; align-items: center; gap: 10px;
                     flex-wrap: wrap; }

/* La NATURE du message, déclarée avant d'écrire (10 août 2026). L'avis dit la
   CONSÉQUENCE — « pas de lien de désabonnement » se comprend, « message non
   commercial » ne dit rien à personne. */
.env-nature .env-mode { min-width: 230px; }
.env-nature-avis { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
                   background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.env-avis { margin: 0 0 10px; padding: 9px 12px; border-radius: 8px;
            background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
            font-size: 13px; line-height: 1.5; }

/* Les listes de Paramètres : une boîte / une personne par carte (10 août 2026).
   Remplacent le formulaire unique qui se scellait dès qu'il était configuré. */
.param-item { border: 1px solid var(--gris-200); border-radius: 10px; margin-bottom: 10px;
              background: #fff; overflow: hidden; }
.param-item-defaut { border-left: 4px solid var(--vert); }
.param-item-neuf { border-style: dashed; }
.param-item-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                   padding: 12px 14px; }
.param-item-nom { font-weight: 700; font-size: 14px; color: var(--gris-900);
                  display: flex; align-items: center; gap: 8px; }
.param-item-sous { font-size: 12px; color: var(--gris-500); flex: 1; min-width: 140px; }
.param-item-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.param-item-corps { padding: 4px 14px 14px; border-top: 1px solid var(--gris-200); }
.param-puce { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
              background: var(--vert-clair); color: var(--vert); }
.param-puce-alerte { background: #fef3c7; color: #b45309; }

/* Les choix du composeur : d'où ça part, qui signe. */
.rep-de-champ { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; }
.rep-de-champ > span { font-size: 12px; color: var(--gris-500); }
.rep-de-champ select { font-size: 13px; padding: 5px 9px; border: 1px solid var(--gris-200);
                       border-radius: 7px; background: #fff; color: var(--gris-900); max-width: 100%; }
.rep-qui-zone { margin-top: -4px; }

/* Le pied de la réponse : montré tel qu'il partira, et retirable d'une case. */
.rep-sig { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--gris-200);
           border-radius: 8px; background: var(--gris-50, #f9fafb); }
.rep-sig-choix { display: flex; align-items: center; gap: 8px; font-size: 13px;
                 font-weight: 600; color: var(--gris-700); cursor: pointer; }
.rep-sig-choix input { width: 16px; height: 16px; accent-color: var(--vert); cursor: pointer; }
.rep-sig-texte { margin: 8px 0 0; padding-left: 24px; font-size: 13px; line-height: 1.5;
                 color: var(--gris-700); white-space: normal; }
.rep-sig .p-sub { margin: 6px 0 0; padding-left: 24px; }

/* Le mode de l'aperçu du pied, dans Paramètres. */
.param-modes { display: flex; gap: 10px; margin: 12px 0 0; }
.param-mode { display: flex; align-items: center; gap: 8px; padding: 7px 13px; cursor: pointer;
              border: 1px solid var(--gris-200); border-radius: 8px; font-size: 13px; font-weight: 600;
              color: var(--gris-700); background: #fff; }
.param-mode input { accent-color: var(--vert); cursor: pointer; }
.param-carte-habillage { margin-top: 18px; border-left: 4px solid var(--vert); }
.param-carte-habillage .param-logo { border-top: none; padding-top: 0; margin-top: 0; margin-bottom: 18px; }

/* ---- Le visuel du message (7 août 2026) — un bouton, une vignette ---- */
.env-image { margin-bottom: 14px; }
.env-image-rangee { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.env-image-note { margin-top: 8px; }
#env-img-vignette { width: 84px; height: 52px; }
#env-img-msg:not(:empty) { margin-top: 10px; }

/* ---- Sous quelle identité la réponse part (7 août au soir) ---- */
.rep-de { font-size: 12px; color: var(--gris-500); margin-bottom: 10px;
          padding-bottom: 10px; border-bottom: 1px dashed var(--gris-200); }
.rep-de:empty { display: none; }
.rep-de strong { color: var(--gris-900); }
.rep-de-manque { color: #b45309; font-weight: 600; }

/* ---- Écrire depuis une fiche : la relance qui a motivé le courriel ---- */
.env-relance-ctx { margin-top: 10px; padding: 8px 12px; background: #fffbeb;
                   border: 1px solid #fde68a; border-radius: 8px; font-size: 13px;
                   color: #92400e; display: inline-block; }

/* ⭐ v881 — L'ÉCART SE VOIT. Un refus de la porte des clés (une ligne de vie
   dont l'identifiant appartient déjà à une autre fiche) n'est ni une écriture
   ni un silence : il a sa couleur, et il passe devant le reste du rapport. */
.imp-refus {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  color: #7f1d1d;
  font-size: 13px;
  line-height: 1.5;
}
.imp-refus-liste { margin: 8px 0 0; padding-left: 20px; }
.imp-refus-liste li { margin: 3px 0; }
.imp-refus-liste code {
  background: #fff; border: 1px solid #fecaca; border-radius: 4px;
  padding: 1px 5px; font-size: 12px;
}
.imp-tile.refus { background: #fee2e2; border-color: #fecaca; color: #991b1b; font-weight: 600; }

/* ⭐ mandat 99 bis (v966) — un bouton qui envoie un courriel se bloque pendant l'envoi,
   et le résultat s'annonce dans un bandeau FIXE que l'écran ne redessine pas (crm.js,
   envoiVerrouille / annoncerEnvoi). */
button[aria-busy="true"], button:disabled { opacity: .6; cursor: progress; }
.crm-annonce {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 1000; max-width: min(640px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.crm-annonce[hidden] { display: none; }
.crm-annonce-ok { background: var(--vert-clair, #ecfdf5); color: var(--vert-fonce, #065f46); border: 1px solid var(--vert-border, #a7f3d0); }
.crm-annonce-err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.crm-annonce-fermer { background: none; border: 0; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }