/* ==========================================================================
   ORIZON Courtage — SUPPLÉMENT à la feuille de la suite (style.css).

   Rien ici ne redéfinit une classe de la suite : on n'ajoute que ce que le
   courtage a en propre et que Connect n'a pas — la sémantique du compte
   courant, les écrans de saisie en étapes, le stock d'attestations.
   Toute la marque reste pilotée par --brand-rgb / --gold-rgb de style.css.
   ========================================================================== */

:root {
  /* ⭐ Sémantique de l'ARGENT DE TIERS, distincte de l'accent de marque.
     positif = le cabinet DOIT à l'assureur ; négatif = on lui doit. */
  --du: #b4531f;
  --du-fond: rgba(180, 83, 31, .09);
  --credit: #1e8e4e;
  --credit-fond: rgba(30, 142, 78, .10);
  --attention: #8a6100;
  --attention-fond: rgba(237, 233, 71, .22);
}

/* Les colonnes de chiffres s'alignent — un compte se lit en colonne. */
.table td.right, .table th.right, .kpi-value, .t-ligne, .num { font-variant-numeric: tabular-nums; }

/* ---------- montants ---------- */
.montant-du     { color: var(--du); font-weight: 700; }
.montant-credit { color: var(--credit); font-weight: 700; }
.kpi-card.du     .kpi-value { color: var(--du); }
.kpi-card.credit .kpi-value { color: var(--credit); }
.kpi-card.alerte { border-left: 3px solid var(--du); }

/* ---------- badges propres au courtage ---------- */
.badge-solde   { background: var(--credit-fond); color: var(--credit); }
.badge-impaye  { background: var(--du-fond);     color: var(--du); }
.badge-partiel { background: var(--attention-fond); color: var(--attention); }
.badge-brouillon { background: #eef0f3; color: var(--muted); }

/* ---------- saisie en étapes ---------- */
.etapes { display: flex; gap: 0; margin: 0 0 20px; flex-wrap: wrap; }
.etape {
  display: flex; align-items: center; gap: 9px; padding: 9px 16px 9px 14px;
  background: var(--panel); border: 1px solid var(--border); border-right: 0;
  color: var(--muted); font-size: 13px; font-weight: 500;
}
.etape:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.etape:last-child  { border-right: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; }
.etape .n {
  width: 22px; height: 22px; border-radius: 50%; background: #eef0f3; color: var(--muted);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.etape.faite { color: var(--positive); }
.etape.faite .n { background: rgba(30,142,78,.14); color: var(--positive); }
.etape.active { color: var(--text); border-color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }
.etape.active .n { background: var(--brand); color: #fff; }
/* Une étape déjà franchie se reclique — c'est le geste qu'on tente d'abord
   pour corriger. En avant, non : l'étape suivante n'a pas été validée. */
.etape.cliquable { cursor: pointer; }
.etape.cliquable:hover { background: #f5f7f9; }
/* Sans objet pour ce mouvement : l'étape reste à sa place — la retirer ferait
   changer la numérotation d'un choix de nature à l'autre — mais elle s'efface. */
.etape.sans-objet { opacity: .45; }
.etape.sans-objet .n { background: transparent; border: 1px dashed var(--border); }

/* ---------- retour / suivant, sous chaque étape ----------
   🔑 Toujours les DEUX, à la même place, y compris à la première étape où le
   retour est désactivé plutôt que retiré : un bouton qui apparaît et disparaît
   déplace le suivant sous le doigt de celui qui allait cliquer. */
.etape-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 16px 0 4px;
}
.etape-nav .btn { min-width: 140px; }
.etape-nav-rang { font-size: 12.5px; }
@media (max-width: 560px) {
  .etape-nav .btn { min-width: 0; flex: 1; }
  .etape-nav-rang { display: none; }
}

/* ---------- récapitulatif collant (saisie d'affaire) ---------- */
.saisie-layout { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: start; }
.saisie-recap .sticky { position: sticky; top: 84px; }

/* ---------- pavé d'explication d'une règle ---------- */
/* Chaque écran de saisie dit la règle qu'il applique : c'est ce qui rend
   compréhensible un refus de la base au lieu de le faire vivre comme un bug. */
.regle {
  border-left: 4px solid var(--gold); background: rgba(var(--gold-rgb), .09);
  padding: 11px 14px; border-radius: 0 8px 8px 0; font-size: 12.5px; color: #5c5320;
  margin-top: 14px;
}
.regle strong { color: #3f3914; }

/* ---------- fiche : listes de définitions ---------- */
.defs { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; font-size: 13.5px; }
.defs dt { color: var(--muted); }
.defs dd { margin: 0; }

/* ---------- ligne de formulaire en ligne (dans un tableau) ---------- */
.form-inline { display: flex; align-items: center; gap: 7px; }
.form-inline input, .form-inline select { margin-top: 0; width: auto; min-width: 110px; }

/* ---------- grilles ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-3 .col-2 { grid-column: span 2; }
.grid-3 .col-3 { grid-column: 1 / -1; }
.kpi-grid.k3 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid.k5 { grid-template-columns: repeat(5, 1fr); }

/* ---------- tableau : lignes neutralisées ---------- */
tr.neutralisee td { opacity: .45; }

/* ---------- compléments de boutons ---------- */
.btn-danger { background: var(--negative); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }

/* ---------- en-tête de panneau avec action à droite ---------- */
.panel-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-tete h3 { margin: 0; }
.panel-tete .droite { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---------- barre d'actions de l'écran (sous le titre) ---------- */
.barre-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.barre-actions .droite { margin-left: auto; display: flex; gap: 8px; }

/* ---------- filtres en ligne ---------- */
.filtres-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filtres-form > div { flex: 1 1 170px; }
.filtres-form > div label { margin-bottom: 0; }

@media (max-width: 1100px) {
  .saisie-layout { grid-template-columns: 1fr; }
  .saisie-recap .sticky { position: static; }
}
@media (max-width: 820px) {
  .grid-3, .kpi-grid.k3, .kpi-grid.k5 { grid-template-columns: 1fr 1fr; }
  .etapes { flex-direction: column; }
  .etape { border-right: 1px solid var(--border); border-bottom: 0; border-radius: 0; }
  .etape:first-child { border-radius: var(--radius) var(--radius) 0 0; }
  .etape:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
}

/* ---------- comparateur de compagnies ---------- */
/* Le tableau tient dans un panneau étroit : on serre, mais les montants
   gardent leurs chiffres alignés — comparer des primes mal alignées, c'est
   comparer de travers. */
.table-compacte { font-size: 13px; }
.table-compacte th, .table-compacte td { padding: 6px 8px; }
/* ⚠️ Un montant qui se coupe en deux lignes (« 150 » / « 415 F ») ne se compare
   plus d'un coup d'œil : les colonnes de chiffres ne se replient jamais. */
.table-compacte td.num, .table-compacte th.num {
    font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.table-compacte td:last-child { white-space: nowrap; }
.ligne-actuelle { background: rgba(var(--brand-rgb, 51, 176, 74), .07); }
/* Une compagnie qui refuse le risque reste À L'ÉCRAN, en gris : absente, on
   la croirait consultée. */
.ligne-refus td { color: var(--muted); background: rgba(0, 0, 0, .02); }

/* ---------- échéancier ---------- */
/* La ligne d'avertissement colle à sa police : c'est un commentaire sur la
   ligne du dessus, pas une entrée du tableau. */
.ligne-avert td { padding-top: 0; border-top: 0; background: rgba(0, 0, 0, .015); }
.ligne-avert .avert { margin-top: 0; }

/* Le report à nouveau ouvre une page de journal : il se lit comme une ligne
   de solde, pas comme un mouvement. */
.ligne-report td { background: rgba(0, 0, 0, .03); font-size: 13px; }

/* ---------- pagination ---------- */
/* La barre dit TOUJOURS où l'on est dans quoi : « 6–10 sur 347 ». Les chiffres
   sont tabulaires pour que la position ne saute pas d'une page à l'autre. */
.pagination { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
              margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
              font-size: 13px; }
.pagination-etat { color: var(--muted); font-variant-numeric: tabular-nums; }
.pagination-liens { display: flex; gap: 4px; margin-left: auto; }
.pagination-liens .btn { min-width: 30px; text-align: center; padding: 4px 7px;
                         font-variant-numeric: tabular-nums; }
.pagination-liens .btn.actif { background: var(--brand); color: #fff;
                               border-color: var(--brand); }
/* Désactivé, pas masqué : un bouton qui disparaît fait bouger la barre sous le
   doigt, et le clic suivant tombe à côté. */
.pagination-liens .btn.inactif { opacity: .4; pointer-events: none; }
.pagination-taille { color: var(--muted); }
.pagination-taille .lien-taille { padding: 2px 6px; border-radius: 5px;
                                  text-decoration: none; color: var(--muted); }
.pagination-taille .lien-taille.actif { background: rgba(var(--brand-rgb), .14);
                                        color: var(--brand); font-weight: 700; }
@media (max-width: 640px) {
  .pagination-liens { margin-left: 0; }
  .pagination-taille { display: none; }
}

/* ---------- profils et droits ---------- */
/* 🔒 Un droit sensible engage l'argent d'un tiers ou change un prix. Aligné
   dans la même liste grise que « saisir un client », il se coche sans y penser :
   le liseré le fait exister à l'œil. */
.check.droit-sensible { border-left: 3px solid var(--du); padding-left: 8px; }

/* ---------- horodatage de l'écran ---------- */
.horodatage { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
              white-space: nowrap; margin-right: 14px; }
@media (max-width: 820px) { .horodatage { display: none; } }

/* ---------- lignes entièrement cliquables ---------- */
/* 🔑 La ligne ENTIÈRE ouvre le détail : viser un lien de 8 caractères dans une
   ligne de 900 px de large, c'est demander à l'utilisateur de faire le travail
   de la mise en page. Le lien réel reste dans la cellule — clic milieu, nouvel
   onglet et lecteurs d'écran continuent de fonctionner. */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover { background: rgba(var(--brand-rgb), .06); }
tr[data-href]:focus-within { outline: 2px solid rgba(var(--brand-rgb), .5);
                             outline-offset: -2px; }

/* ---------- carte KPI cliquable ---------- */
a.kpi-lien { text-decoration: none; color: inherit; display: block; }
a.kpi-lien .kpi-card { height: 100%; transition: border-color .12s, transform .12s; }
a.kpi-lien:hover .kpi-card { border-color: rgba(var(--brand-rgb), .55);
                             transform: translateY(-1px); }
a.kpi-lien .kpi-card::after { content: "›"; float: right; margin-top: -22px;
                              color: var(--muted); font-size: 18px; }

/* ---------- relances d'échéance ---------- */
/* Le message RÉEL est montré avant l'envoi : il doit se lire comme un message,
   pas comme une ligne de tableau. D'où une carte par destinataire. */
.relance-carte { border: 1px solid var(--border); border-radius: var(--radius);
                 padding: 12px 14px; margin-bottom: 10px; }
.relance-carte.en-defaut { background: rgba(0, 0, 0, .02); }
/* ⚠️ Le bloc du destinataire ne doit pas écraser celui de la police : sur un
   panneau étroit il passe DESSOUS au lieu de réduire le nom du client à une
   colonne de deux lettres. */
.relance-tete { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.relance-tete > div:first-of-type { flex: 1 1 260px; min-width: 220px; }
.relance-dest { margin-left: auto; text-align: right; }
.relance-message { margin: 10px 0 0 26px; padding: 10px 12px; border-radius: 8px;
                   background: rgba(var(--brand-rgb), .05);
                   border-left: 3px solid rgba(var(--brand-rgb), .35); }
.relance-objet { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
/* ⚠️ `pre` sans `white-space: pre-wrap` déborderait la carte : un message qu'on
   ne lit qu'à moitié ne se relit pas avant de partir. */
.relance-message pre { margin: 0; font-family: inherit; font-size: 13px;
                       line-height: 1.55; white-space: pre-wrap;
                       overflow-wrap: anywhere; }

/* ---------- prime reprise à la main ---------- */
.t-ligne .barree { text-decoration: line-through; color: var(--muted); }
.t-ligne.ecart { font-weight: 600; color: #9a6b00; }

/* ---------- ce que l'affaire rapporte ----------
   En retrait du décompte : c'est la rémunération du cabinet, pas une ligne que
   le client paie. La confondre avec la prime serait une faute d'affichage. */
.t-ligne.commission { margin-top: 10px; border-bottom: 0; color: var(--positive);
                      font-weight: 600; }
.t-ligne.commission em { font-style: normal; font-weight: 400;
                         color: var(--muted); }

/* ═══════════ BARRE DE PÉRIODES ═══════════
   🔑 Les puces AVANT les deux dates : la question réelle est presque toujours
   nommée (« le mois dernier »), et composer 01/07 → 31/07 à la main est un
   calcul qu'un humain rate un jour sur dix. Les deux dates restent là pour le
   cas particulier, en retrait. */
.barre-periode { display: flex; flex-wrap: wrap; gap: 12px;
                 align-items: center; justify-content: space-between; }
.periode-sur { flex: 1 0 100%; font-size: .82rem; color: var(--muted); }
.periode-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.periode-puces .puce {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .12); background: #fff;
  font-size: .82rem; color: inherit; text-decoration: none; white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.periode-puces .puce:hover { border-color: rgba(var(--brand-rgb), .55); }
.periode-puces .puce.actif {
  background: rgba(var(--brand-rgb), .12);
  border-color: rgba(var(--brand-rgb), .55); font-weight: 600;
}
.periode-perso { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.periode-perso label { margin: 0; font-size: .82rem; color: var(--muted); }
.periode-perso input[type=date] { width: auto; }
/* ⚠️ Les bornes réelles sont TOUJOURS affichées : « Mois dernier » seul oblige
   à faire confiance ; « Mois dernier (01/07 → 31/07) » se vérifie d'un coup
   d'œil, et c'est ce qu'on recopie sous un tableau imprimé. */
.periode-etat { margin-top: 8px; font-size: .86rem; display: flex;
                flex-wrap: wrap; gap: 8px; align-items: center; }
.hint-alerte { color: var(--du); }
.avertissement {
  padding: 10px 14px; border-radius: 8px; font-size: .88rem;
  background: var(--attention-fond); border-left: 3px solid var(--attention);
}

/* ═══════════ CHERCHEUR DE CLIENT ═══════════
   On tape le nom, on ne le cherche pas dans une liste déroulante.
   🔑 La bordure VERTE quand un client est retenu : c'est la seule façon de
   distinguer d'un coup d'œil « j'ai tapé un nom » de « j'ai choisi ce
   client » — et c'est exactement la confusion qui fait émettre un contrat au
   nom de quelqu'un d'autre. */
.chercheur { position: relative; }
.chercheur .chercheur-saisie { width: 100%; }
.chercheur.choisi .chercheur-saisie {
  border-color: var(--credit); background: var(--credit-fond);
}
.chercheur-liste {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  margin-top: 2px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid rgba(0, 0, 0, .16); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
}
.chercheur-item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.chercheur-item:last-child { border-bottom: 0; }
.chercheur-item.actif, .chercheur-item:hover { background: rgba(var(--brand-rgb), .10); }
.chercheur-nom  { font-weight: 600; }
.chercheur-code { font-family: ui-monospace, "SF Mono", Menlo, monospace;
                  font-size: .82rem; letter-spacing: .06em; color: var(--muted); }
.chercheur-note { grid-column: 1 / -1; font-size: .78rem; }
.chercheur-etat { margin-top: 4px; min-height: 1.1em; }
.hint-ok { color: var(--credit); }

/* Le code assuré s'affiche pour être DICTÉ : chasse fixe, caractères espacés.
   Un « 0 » et un « O » confondus au téléphone, c'est un rappel de plus. */
.code-assure {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .10em; font-weight: 600;
  background: rgba(0, 0, 0, .05); padding: 1px 7px; border-radius: 5px;
  white-space: nowrap;
}

/* ═══════════ JOURNAL D'AUDIT ═══════════ */
td.nowrap, .nowrap { white-space: nowrap; }
.detail-json { font-size: .78rem; max-height: 320px; overflow: auto;
               background: rgba(0, 0, 0, .03); padding: 10px; border-radius: 6px;
               white-space: pre-wrap; overflow-wrap: anywhere; }
.fiche-entete { display: flex; flex-wrap: wrap; gap: 28px; }
.fiche-entete code { font-size: .74rem; overflow-wrap: anywhere; }