/* Ce qui n'existe que dans le tri des demandes.
   La charte, le rail, la barre, les cartes, les grilles et l'assistant viennent de
   `style.css`, qui est la feuille de la démonstration de la fraude, copiée entière.
   Ici, seulement ce que cette démonstration-là n'a pas : le message et ses onglets,
   les zones allumées sur une pièce, le schéma. La frise d'une demande, le fil d'un
   contact compris, vit dans `frise.css`. */








  padding:8px 10px; border-radius:9px; cursor:pointer; font-size:13.5px; }












.page { padding:22px 26px 40px; max-width:1240px; }

h1 .cpt { font-weight:500; font-size:15px; color:var(--muted); margin-left:8px; }

h2 { font-size:14.5px; margin:0 0 10px; }

h3 { font-size:13px; margin:0 0 8px; }

/* Une table de travail : rien au-dessus d'elle, elle commence tout de suite. */
table.tbl { width:100%; border-collapse:collapse; font-size:13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }

table.tbl th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600;
  padding:10px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface); }

table.tbl td { padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top; }

table.tbl tr:last-child td { border-bottom:0; }

table.tbl tr.l { cursor:pointer; }

table.tbl tr.l:hover td { background:var(--primary-weak); }

table.tbl td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

.obj { font-weight:600; }

.de { color:var(--muted); font-size:12px; }

.pill { display:inline-flex; align-items:center; gap:5px; padding:1px 9px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; }

.pill.sinistre { background:var(--hi-w); color:var(--hi); }

.pill.avenant { background:var(--md-w); color:var(--md); }

.pill.souscription { background:var(--lo-w); color:var(--lo); }

.pill.client { background:var(--primary-weak); color:var(--primary); }

.pill.epargne { background:#E6F0FF; color:#1B4F9B; }

.pill.reclamation { background:#FDE7F3; color:#9B1B63; }

.pill.fraude { background:#FFE9E3; color:#9A3412; }

.pill.hors { background:var(--surface-2); color:var(--muted); }

.etat { font-size:11.5px; font-weight:600; white-space:nowrap; }

.etat.att { color:var(--md); }

.etat.ok { color:var(--lo); }

.etat.cor { color:var(--ia); }

/* Les deux volets d'une demande : le message a gauche, ce qui en a ete tire a droite.
   Un clic sur une information allume le passage du message qui la porte. */
/* Trois colonnes pour deux : celle du milieu est la poignée, elle prend la place de
   l'espace qui les séparait. La charte porte son allure et le geste qui la tire. */
.duo { display:grid; grid-template-columns:var(--gauche,minmax(0,1fr)) 16px minmax(0,1fr); gap:0; align-items:start; }


/* ---- La pièce, montrée en grand ----
   Le cadre, la vignette, la tête de volet viennent de la charte (`.arr-doc`,
   `.arr-page`, `.arr-tete`, `.arr-jointe`) : c'est le même habillage qu'un dossier
   de la fraude, et il n'est défini qu'une fois. Ici, seulement ce que la charte n'a
   pas : la feuille sur toute la hauteur, et les zones posées dessus. */
.page.page-message .arr-page { max-height:none; }
.arr-page .doc-page { position:relative; max-width:620px; margin:0 auto; }
.arr-page .doc-page img { display:block; width:100%; height:auto; background:#fff; box-shadow:0 1px 5px rgba(20,38,59,.2); }
.arr-doc .info { font-size:12px; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:9px 11px; margin-bottom:9px; }
.arr-doc .info b { color:var(--ia); }
.arr-jointe.on { box-shadow:0 0 0 1.5px var(--ia); }

/* La zone d'une valeur lue, posee en % de la feuille : elle tient a toute largeur. */
/* Seul le champ cliqué se voit ; les autres zones restent cliquables et se montrent au survol
   (l'auteur, le 30-09 : « je vois des bbox avec pointillé, c'est pas normal »). */
.dz { position:absolute; border:1.5px solid transparent; border-radius:3px; background:transparent; cursor:pointer; }

.dz:hover { border-color:rgba(106,63,181,.45); background:rgba(106,63,181,.08); }

.dz.on { border-color:var(--ia); background:rgba(106,63,181,.24); box-shadow:0 0 0 2px rgba(106,63,181,.25); }

mark.surl { background:var(--ia-w); border-bottom:2px solid var(--ia-l); border-radius:2px; padding:0 1px; color:inherit; cursor:pointer; }

mark.surl:hover { background:#EFE6FD; }

mark.surl.on { background:#E2D2FA; border-bottom-color:var(--ia); }

/* Le cadre violet : ce qui est dedans a ete produit par un composant IA, et son
   pied dit ce qu'on lui a envoye et ce qu'il a rendu. */
.wg { border:1px solid var(--ia-l); border-radius:var(--radius); background:var(--surface); box-shadow:0 1px 3px rgba(106,63,181,.09); margin-bottom:14px; overflow:hidden; }

.wg-tete { display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:11px 15px 10px; border-bottom:1px solid var(--line-soft); font-size:14px; font-weight:600; }

.wg-tete .prog { margin-left:auto; font-size:11.5px; font-weight:500; color:var(--muted); }

.wg-corps { padding:13px 15px; }

/* Une table dans un panneau se replie, elle ne sort pas par la droite. La charte
   laisse les tables à leur largeur naturelle (`table { min-width:max-content }`) et
   fait défiler la carte qui les porte ; un panneau du tri n'a pas ce défilement, et
   la table dépassait de sa carte, la dernière colonne coupée en deux. */
.wg-corps table { min-width:0; table-layout:fixed; }
.wg-corps table td { white-space:normal; vertical-align:top; overflow-wrap:anywhere; }
/* Trois colonnes tiennent dans un panneau, quatre non : le score et l'avis disent la
   même chose du même calcul, ils vont ensemble. Ce sur quoi la méthode s'est appuyée
   se lit sous sa réponse. */
.meth th { white-space:normal; }
.meth td:first-child { width:27%; } .meth td:last-child { width:22%; }
.meth .sur { display:block; margin-top:3px; font-size:11px; line-height:1.5; color:var(--muted); font-weight:400; }

.wg-tete .wg-i { width:19px; height:19px; flex:none; border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:999px; font-size:11px; font-weight:700; font-style:italic; line-height:1; cursor:pointer; padding:0; }

.wg-tete .wg-i:hover, .wg-tete .wg-i.on { border-color:var(--ia); color:var(--ia); background:var(--ia-w); }

.wg-tete > span:first-of-type { font-weight:600; }

.wg-part { border-top:1px solid var(--line-soft); margin-top:12px; padding-top:10px; }

.wg-part .alt-t { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:5px; }

.wg-pied i { color:var(--ia); font-style:normal; cursor:pointer; }

.wg-pied i:hover { text-decoration:underline; }

.prop { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.prop .t { font-size:16px; font-weight:600; }

/* La confiance se lit au bout de la ligne : une jauge courte, le chiffre, et le mot
   qui dit le doute. Pleine largeur, la barre prenait la place d'un titre pour dire
   une mesure. */
.conf { margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:11.5px;
  color:var(--muted); font-variant-numeric:tabular-nums; }

.conf b { font-weight:600; color:var(--ink-soft); }

.conf .dit { border-radius:20px; padding:1px 9px; background:var(--surface-2); }

.conf.doute .dit { background:var(--md-w); color:var(--md); }

.jauge { height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; width:56px; }

.jauge i { display:block; height:100%; background:var(--ia); }

.conf.doute .jauge i { background:var(--md); }

.lu { display:grid; margin-top:6px; }

.lu button { display:flex; gap:9px; align-items:baseline; text-align:left; width:100%; border:0; background:none; cursor:pointer;
  padding:7px 8px; border-radius:8px; font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

.lu button:hover { background:var(--ia-w); }

.lu button.on { background:var(--ia-w); box-shadow:inset 2px 0 0 var(--ia); }

.lu .c { font-size:11px; color:var(--muted); flex:none; width:118px; }

.lu .v { flex:1; }

.lu .v b { font-weight:600; color:var(--ink); }

.alt { border-top:1px solid var(--line-soft); margin-top:11px; padding-top:9px; font-size:12.5px; color:var(--ink-soft); }

.alt .alt-t { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }

.grp { margin-bottom:12px; }

.grp:last-child { margin-bottom:0; }

.grp-t { font-size:12.5px; font-weight:600; cursor:pointer; padding:3px 0; }

.grp-t:hover { color:var(--ia); }

.grp-t .muted { font-weight:500; font-size:11.5px; }

.verifs { display:grid; gap:2px; }

.v-l { display:flex; gap:9px; align-items:baseline; font-size:12.5px; padding:6px 8px; border-radius:8px; line-height:1.5; }

.v-l .m { font-weight:700; flex:none; width:14px; text-align:center; }

.v-l.oui .m { color:var(--lo); }

.v-l.non .m { color:var(--hi); }

.v-l.voir .m { color:var(--md); }

.v-l.non { background:var(--hi-w); }

.v-l.voir { background:var(--md-w); }

.regles-p { margin-top:10px; display:grid; gap:5px; }

.r-l { font-size:12px; line-height:1.5; border-left:2px solid var(--ia-l); padding:3px 0 3px 9px; }

.r-l .r-si { display:block; font-weight:600; color:var(--ink); }

.choix-t { width:100%; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-top:4px; }

.alt .l { display:flex; gap:10px; align-items:baseline; padding:3px 0; }

.alt .l .p { margin-left:auto; font-variant-numeric:tabular-nums; color:var(--muted); font-size:11.5px; }

.geste .rang { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.geste .dit { font-size:12px; color:var(--muted); margin:9px 0 0; line-height:1.55; }

.choix { display:none; gap:6px; flex-wrap:wrap; margin-top:10px; }

.choix.on { display:flex; }

.choix button { border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:4px 11px; font-size:12px; cursor:pointer; color:var(--ink-soft); }

.choix button:hover { border-color:var(--ia); color:var(--ia); }

.retenu { background:var(--lo-w); border:1px solid #BFE6DF; border-radius:10px; padding:9px 12px; font-size:12.5px; color:#054E43; margin-bottom:11px; }

.retenu b { font-weight:600; }

.retenu .d { color:#3E7F73; font-size:11.5px; display:block; margin-top:2px; }

.avert { background:var(--md-w); border:1px solid #F2D7AE; border-radius:10px; padding:9px 12px; font-size:12.5px; color:#6E4508; margin-bottom:12px; line-height:1.6; }

.avert b { font-weight:600; }

/* Le titre d'un message et ses renvois : l'objet a gauche, de quoi passer au suivant a
   droite ; a l'etroit (l'objet sous 220 px), les renvois passent dessous, jamais sur un mot. */
.tete-msg { display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 16px; margin-bottom:10px; }
.tete-msg h1 { flex:1 1 220px; min-width:0; margin:0; overflow-wrap:break-word; } .tete-msg .nav-d { flex:none; }
.tete-msg h1 .cpt { display:block; margin:2px 0 0; font-size:12.5px; }
.btn.pt { padding:3px 10px; font-size:13px; line-height:1.4; }


.grille2 { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:12px; }

.fam-c { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; cursor:pointer; }

.fam-c:hover { border-color:var(--primary); }

.fam-c ul { margin:8px 0 0; padding-left:17px; font-size:12.5px; color:var(--ink-soft); line-height:1.6; }

.fam-c .eq { font-size:11.5px; color:var(--muted); margin-top:9px; display:block; }

.chiffres .k { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; }

.chiffres .k b { display:block; font-size:23px; line-height:1.2; letter-spacing:-.02em; }

.chiffres .k span { font-size:12px; color:var(--muted); }

.liste-trav { display:grid; gap:7px; }

.trav { display:flex; gap:10px; align-items:baseline; font-size:12.5px; padding:8px 11px; border:1px solid var(--line-soft); border-radius:9px; background:var(--surface); cursor:pointer; }

.trav:hover { border-color:var(--primary); }

.trav .q { margin-left:auto; color:var(--muted); font-size:11.5px; white-space:nowrap; }

.as-m { display:flex; gap:9px; align-items:baseline; font-size:12.5px; padding:6px 8px; border-radius:8px; cursor:pointer; }

.as-m:hover { background:var(--surface-2); }

.as-m .q { margin-left:auto; color:var(--muted); font-size:11.5px; white-space:nowrap; }

.as-lien { color:var(--primary); cursor:pointer; }

.as-lien:hover { text-decoration:underline; }

.vide { color:var(--muted); font-size:12.5px; padding:10px 0; }

.tab-io { width:100%; border-collapse:collapse; font-size:12.5px; }

.tab-io td { padding:7px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top; }

.tab-io tr:last-child td { border-bottom:0; }

.tab-io td:first-child { color:var(--muted); width:168px; }

.mono { font-family:var(--mono); font-size:11.5px; background:var(--surface-2); padding:0 4px; border-radius:4px; }

details summary { list-style:none; }

details summary::-webkit-details-marker { display:none; }

details summary::before { content:"+ "; color:var(--muted); }

details[open] summary::before { content:"− "; }

/* Le schema du processus : trois familles de boites, et des filets droits. */
.schema { overflow-x:auto; }

.schema svg { display:block; width:100%; min-width:940px; height:auto; font-family:inherit; }

.s-b rect { fill:var(--surface); stroke:var(--line); stroke-width:1.4; }

.s-b.dehors rect { fill:#F2F4F8; stroke:#C3CEDF; }

.s-b.maison rect { fill:var(--primary-weak); stroke:#B7C8EC; }

.s-b.ia rect { fill:var(--ia-w); stroke:var(--ia-l); }

.s-b.sortie rect { fill:var(--lo-w); stroke:#BFE6DF; }

.s-b.humain rect { fill:#fff; stroke:var(--ink); stroke-width:1.8; }

.s-t { font-size:13px; font-weight:700; fill:var(--ink); }

.s-b.ia .s-t { fill:var(--ia); }

.s-l { font-size:11px; fill:var(--ink-soft); }

.s-z { font-size:10px; letter-spacing:.09em; fill:var(--muted); }

.s-r { font-size:11px; fill:var(--muted); text-anchor:middle; }

.s-f { fill:none; stroke:#33455C; stroke-width:1.4; }

.s-f.retour { stroke-dasharray:5 4; stroke:var(--muted); }

ul.pts { margin:0; padding-left:18px; font-size:13px; color:var(--ink-soft); line-height:1.7; }


@media (max-width:1000px){ .duo { grid-template-columns:minmax(0,1fr); } .duo > .poignee { display:none; } }

/* Le pied d'un bloc se deplie par le bouton d'information : la feuille d'origine
   lui pose `display:flex`, qui gagne sur l'attribut `hidden`. */
.wg-pied[hidden] { display:none; }

/* Les regles dont le nom existait deja dans la feuille d'origine, avec un autre sens :
   elles ont ete renommees plutot que de se battre avec elle. */
.chiffres { display:grid; grid-template-columns:repeat(auto-fit,minmax(154px,1fr)); gap:12px; margin-bottom:16px; }
.chiffres .k { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; }
.chiffres .k b { display:block; font-size:23px; line-height:1.2; letter-spacing:-.02em; }
.chiffres .k span { font-size:12px; color:var(--muted); }
.geste .dit { font-size:12px; color:var(--muted); margin:9px 0 0; line-height:1.55; }

/* ---- La journée d'un poste : à faire, historique ----
   Les onglets sont ceux de la charte (`.ong-doc`), les mêmes que ceux d'un dossier.
   La note dit une fois ce que le dernier geste a fait, sur l'écran qui suit. */
.liste-taches { margin:4px 0 12px; }
.note-tache { margin:0 0 12px; padding:9px 13px; border-radius:10px; background:var(--lo-w); color:var(--lo); border:1px solid #bfe3dc; font-size:13px; }
.page-message .note-tache { flex:none; }
.pj-n { display:inline-flex; align-items:center; gap:2px; margin-left:6px; font-size:11.5px; color:var(--muted); vertical-align:-1px; }
.pj-n svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---- L'écran d'un message tient dans la hauteur ----
   Le message à gauche, ce que les composants en ont tiré à droite, et chacun défile
   de son côté. Sans cela, la page entière défilait : on perdait le message de vue dès
   qu'on lisait la lecture, et c'est justement les deux qu'il faut avoir ensemble.
   La page s'appelle `page-message`, jamais `msg` : `.msg` est la carte d'un message
   dans la charte, avec son fond gris et son bord arrondi, et la page en héritait. */
.page.page-message { height:100%; display:flex; flex-direction:column; padding-bottom:12px; }
.page.page-message .duo { flex:1; min-height:0; align-items:stretch; }
/* `overflow:auto` suffit : une barre dessinee a la main reste affichee en permanence
   sur Windows, et l'ecran avait l'air de deborder alors qu'il tenait. */
.page.page-message .duo > div:not(.poignee) { min-height:0; overflow-y:auto; scrollbar-width:thin; padding-right:4px; }
@media (max-width:1000px){
  .page.page-message { height:auto; display:block; }
  .page.page-message .duo > div:not(.poignee) { overflow:visible; }
}

/* ---- Le bandeau d'un poste, en tête de sa vue d'ensemble ---- */
.poste-bandeau { margin:0 0 20px; }
.poste-bandeau .gr { font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; margin:0 0 8px 2px; }
.poste-bandeau .tuiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.poste-bandeau .tuile { text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; cursor:pointer; font:inherit; display:block; }
.poste-bandeau .tuile:hover { border-color:var(--primary); }
.poste-bandeau .tuile b { display:block; font-size:24px; line-height:1.2; letter-spacing:-.02em; color:var(--ink); }
.poste-bandeau .tuile span { display:block; font-size:13px; color:var(--ink-soft); margin-top:2px; }
.poste-bandeau .tuile small { display:block; font-size:11.5px; color:var(--muted); margin-top:3px; }

/* Un signal de depart est un constat, pas une faute : ni rouge, ni vert. La couleur
   reste sur le niveau de risque, en tete du bloc. */
.v-l.obs { background:var(--surface-2); }
.v-l.obs .m { color:var(--muted); font-weight:700; }

/* ---- La bulle d'un composant, posee sous sa pastille ---- */
.compo-bulle { position:fixed; z-index:90; width:330px; max-width:calc(100vw - 24px); background:var(--surface);
  border:1px solid var(--ia-l); border-radius:10px; box-shadow:0 10px 28px rgba(20,38,59,.17);
  padding:11px 13px; font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
.compo-bulle[hidden] { display:none; }
.compo-bulle b { display:block; color:var(--ia); font-size:13px; }
.compo-bulle > span { display:block; color:var(--ink); margin-top:1px; }
.compo-bulle .io { display:grid; gap:4px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--ia-l); font-size:12px; }
.compo-bulle .io i { font-style:normal; color:var(--muted); text-transform:uppercase; font-size:10px; letter-spacing:.06em; margin-right:5px; }
.compo-bulle .fiche { display:block; margin-top:8px; font-size:11.5px; color:var(--primary); }

/* ---- À qui se rattache la demande ----
   Une ligne par clé que la famille attend : le nom de la clé, sa valeur, et d'où le tri
   la tient. La source se lit à sa couleur : lue (texte ou pièce jointe), déduite
   (portefeuille, dossier ouvert), tirée de l'expéditeur (plus faible), à créer, ou
   manquante. Un clic sur une clé lue l'allume sur le message ou sur la pièce. */
.id-grille { display:grid; }
.id-l { display:grid; grid-template-columns:118px 1fr auto; gap:9px; align-items:baseline; text-align:left; width:100%;
  border:0; background:none; cursor:pointer; padding:5px 6px; border-radius:4px; font:inherit; font-size:13px; color:var(--ink); }
.id-l:hover:not([disabled]) { background:var(--ia-w); }
.id-l.on { background:var(--ia-w); box-shadow:inset 2px 0 0 var(--ia); }
.id-l[disabled] { cursor:default; }
.id-l .c { font-size:11px; color:var(--muted); }
.id-l .v b { font-weight:600; }
.id-l .id-note { display:block; font-size:11.5px; color:var(--muted); margin-top:1px; }
.id-l .id-vide { font-style:italic; color:var(--muted); }
.id-src { font-size:10.5px; white-space:nowrap; padding:1px 7px; border-radius:20px; background:var(--surface-2); color:var(--ink-soft); }
.id-l.message .id-src, .id-l.piece .id-src { background:var(--lo-w); color:var(--lo); }
.id-l.portefeuille .id-src, .id-l.dossier .id-src { background:var(--primary-weak); color:var(--primary); }
.id-l.expediteur .id-src { background:var(--md-w); color:var(--md); }
.id-l.manque .id-src { background:var(--hi-w); color:var(--hi); font-weight:600; }
.id-l.manque .id-vide { color:var(--hi); }
.id-ratt { margin-top:10px; padding:8px 11px; border-radius:6px; font-size:12.5px; line-height:1.45;
  background:var(--lo-w); box-shadow:inset 3px 0 0 var(--lo); }
.id-ratt.voir { background:var(--md-w); box-shadow:inset 3px 0 0 var(--md); }
@media (max-width:1280px){ .id-l { grid-template-columns:96px 1fr; } .id-src { grid-column:2; justify-self:start; } }
/* Mia Scan : chaque champ lu se corrige sur place. */
.lu-l { display:flex; gap:9px; align-items:center; padding:5px 8px; border-radius:6px; cursor:pointer; }
.lu-l:hover { background:var(--ia-w); }
.lu-l.on { background:var(--ia-w); box-shadow:inset 2px 0 0 var(--ia); }
.lu-l input.v { flex:1; min-width:0; font:inherit; font-weight:600; color:var(--ink); border:1px solid transparent; border-radius:5px; padding:2px 6px; background:transparent; }
.lu-l input.v:hover, .lu-l input.v:focus { border-color:var(--line, #cbd5e1); background:#fff; outline:none; }
.lu-l.corrige input.v { color:#92400e; }
.lu-l.corrige .c::after { content:" · corrigé"; color:#92400e; }