/* La feuille de la démonstration fraude, telle quelle. Vision est la même
   application : ce fichier ne se retouche pas à la main d'un côté seulement. */
:root {
    /* Palette relevée sur foyer.lu, dans les jetons de leur systeme de design
       (prefixe `--fds-`). Le bleu #2957C8 porte la marque et l'interaction ; la
       gravite garde ses trois couleurs, rouge, orange, vert, sinon il n'y a plus
       d'echelle du tout. Les versions foncees servent des qu'il y a du texte. */
    --bg:#F8F9FC; --surface:#fff; --surface-2:#EAEEF6; --line:#D9E1EE; --line-soft:#EAEEF6;
    --ink:#14263B; --ink-soft:#33455C; --muted:#67768E;
    --primary:#2957C8; --ia:#6A3FB5; --ia-l:#D9CCF0; --ia-w:#F4F0FC; --primary-weak:#EAEEFA;
    --hi:#A32C30; --hi-w:#FFF0F0; --md:#975F09; --md-w:#FEECD7; --lo:#006353; --lo-w:#E0F5F3;
    /* Ce qui reste à faire, dans une frise : le point ambre, son halo, son titre
       (assets/frise_verticale.css, assets/frise.css). */
    --afaire:#D97706; --afaire-w:#FDF0E3; --afaire-t:#B45309;
    --mono:"SF Mono",ui-monospace,Consolas,monospace; --radius:12px;
    /* La hauteur de la barre du haut, filet compris. La tete de l'assistant et le
       menu du profil s'y accrochent : pose chacun sur son contenu, le filet de
       l'assistant tombait quatre pixels sous celui de la barre, et la cassure se
       voyait en plein milieu de l'ecran. */
    --barre-h:54px;
  }
  * { box-sizing:border-box; }
  /* La coquille ne défile jamais : le menu et la barre du haut restent en place, seul
     <main> défile. Sans ce verrou, n'importe quel débordement (un menu de grille posé
     dans le body, un scrollIntoView, une fenêtre étroite) fait glisser toute l'application,
     le logo sort de l'écran et une bande vide apparaît en bas. */
  html, body { height:100%; overflow:hidden; overscroll-behavior:none; }
  body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.55 system-ui,"Segoe UI",Roboto,Arial,sans-serif; }
  a { color:inherit; text-decoration:none; }
  button { font:inherit; }
  .app { display:grid; grid-template-columns:var(--side-w,226px) 1fr; grid-template-rows:54px 1fr; height:100vh; height:100dvh; overflow:hidden;
    transition:grid-template-columns .17s ease; }
  @media (prefers-reduced-motion:reduce){ .app { transition:none; } }
  .side { grid-row:1 / 3; } main { grid-column:2; grid-row:2; } .topbar { grid-column:2; grid-row:1; }
  /* ---- menu, repliable comme chez ChatGPT : ouvert, logo à gauche et icône « réduire » à droite
     sur la même ligne ; fermé, seul le logo reste et devient le bouton « développer » au survol ---- */
  .side { background:var(--surface); border-right:1px solid var(--line); padding:18px 12px; position:relative; overflow:hidden; }
  /* Le nom de l'application tient sur deux lignes s'il le faut : le bloc ne laisse
     que 117 px et un nom un peu long s'y coupait au milieu d'un mot. */
  /* Le logo fait la largeur de la colonne des icônes du menu : le nom de
     l'application tombe alors exactement sur « Vue d'ensemble ». */
  .brand { display:flex; align-items:center; gap:10px; margin-bottom:22px; padding:0; min-height:26px; }
  .brand .logo { width:26px; height:26px; border-radius:9px; background:transparent; overflow:hidden; color:#fff; font-weight:800; border:0; padding:0;
    display:flex; align-items:center; justify-content:center; flex:none; font-size:15px; cursor:pointer; }
  .brand .logo .ouvre { display:none; } .brand .logo .marque { display:flex; width:100%; height:100%; }
  .brand .logo .marque svg { width:100%; height:100%; display:block; }
  .brand-txt { flex:1; min-width:0; overflow:hidden; } .brand-txt b { font-size:14px; line-height:1.2; display:block; white-space:nowrap; } .brand-txt span { display:block; font-size:11px; color:var(--muted); white-space:nowrap; }
  .side-toggle { margin-left:auto; width:30px; height:30px; border-radius:8px; border:0; background:none; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
  .side-toggle:hover { background:var(--surface-2); color:var(--ink); }
  /* L'icone d'une rubrique occupe la meme boite que le logo, au meme endroit : les
     deux colonnes tombent alors l'une sur l'autre, et le nom de l'application sur
     le premier libelle du menu. */
  .nav a { display:flex; align-items:center; gap:10px; padding:0; height:40px; border-radius:9px; color:var(--ink-soft); font-weight:500; margin-bottom:2px; white-space:nowrap; overflow:hidden; cursor:pointer; }
  .nav a:hover { background:var(--surface-2); } .nav a.on { background:var(--primary-weak); color:var(--primary); font-weight:600; }
  .nav a .lb i { font-style:normal; font-weight:700; color:var(--muted); margin-right:7px; font-variant-numeric:tabular-nums; }
  .nav a.on .lb i { color:var(--primary); }
  /* Les rubriques du menu se rangent par categorie : un intitule court, en petit,
     au-dessus des entrees qu'il coiffe. Un poste qui ne travaille pas une categorie
     ne la voit pas, titre compris. */
  .nav .nav-gr { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
    margin:14px 0 4px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:clip; position:relative; }
  .nav .nav-gr:first-child { margin-top:2px; }
  /* Replié, un titre garde sa hauteur : son texte s'efface et un filet prend sa place.
     S'il se réduisait à une ligne d'un pixel, toutes les icônes du dessous remontaient. */
  .nav .nav-gr::after { content:""; position:absolute; left:2px; top:50%; width:22px; height:1px; background:var(--line);
    opacity:0; transition:opacity .14s ease; }
  /* Une couleur par categorie : l'icone et l'intitule la portent, discretement.
     Elle sert a retrouver une rubrique du coin de l'oeil, pas a decorer. */
  .nav .nav-gr[data-cat="arrive"] { color:#1D6F9E; }
  .nav .nav-gr[data-cat="dossiers"] { color:var(--primary); }
  .nav .nav-gr[data-cat="commerce"] { color:var(--lo); }
  .nav .nav-gr[data-cat="refs"] { color:var(--ia); }
  .nav .nav-gr[data-cat="outil"] { color:var(--md); }
  .nav a[data-cat="arrive"] .ic { color:#1D6F9E; }
  .nav a[data-cat="dossiers"] .ic { color:var(--primary); }
  .nav a[data-cat="commerce"] .ic { color:var(--lo); }
  .nav a[data-cat="refs"] .ic { color:var(--ia); }
  .nav a[data-cat="outil"] .ic { color:var(--md); }
  .nav a.on .ic { color:inherit; }
  .nav a.sec { margin-top:0; font-size:13px; } .nav a.sec:first-of-type { margin-top:10px; }
  .nav .ic { width:18px; height:18px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
  .nav .ic svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .nav a .ic { width:26px; height:26px; display:flex; align-items:center; justify-content:center; flex:none; } .nav a:hover .ic { color:var(--ink-soft); } .nav a.on .ic { color:var(--primary); }
  .side .foot { margin-top:20px; padding:10px 8px; font-size:11px; color:var(--muted); border-top:1px solid var(--line); }
  /* ---- Le rail replié : aucune icône ne bouge ----
     Replier le menu ne déplace ni le logo ni une icône, en largeur comme en hauteur :
     le rail se referme autour d'elles, les libellés s'effacent en fondu, les titres de
     catégorie gardent leur hauteur. On retrouve une rubrique là où on l'a laissée.
     Avant, le rail recentrait ses icônes (6 px de décalage) et écrasait ses titres
     (les icônes remontaient de 15 px par catégorie) : on voyait le menu sauter.
     Largeur repliée : la marge, l'icône, la marge, soit 12 + 26 + 12. */
  :root { --rail-replie:50px; }
  .app.side-replie { grid-template-columns:var(--rail-replie) 1fr; }
  .nav a .lb, .brand-txt, .side-toggle, .nav .nav-gr { transition:opacity .14s ease, color .14s ease; }
  .side-replie .brand-txt, .side-replie .side-toggle { opacity:0; pointer-events:none; }
  .side-replie .nav a .lb { opacity:0; }
  /* Le fond de la rubrique ouverte déborde de 6 px de part et d'autre de l'icône,
     sans la déplacer : la marge négative et le retrait se compensent. */
  .side-replie .nav a { margin:0 -6px 2px; padding:0 6px; }
  .app.side-replie .nav .nav-gr { color:transparent; }
  .side-replie .nav .nav-gr::after { opacity:1; }
  .side-replie .brand .logo:hover { background:var(--surface-2); color:var(--ink); }
  .side-replie .brand .logo:hover .marque { display:none; } .side-replie .brand .logo:hover .ouvre { display:flex; }
  .side-replie .side .foot { display:none; }
  /* ---- pages ---- */
  /* position:relative : main doit être le bloc de référence de ce qu'il contient. AG Grid pose
     des éléments en position:absolute (mesure, description pour les lecteurs d'écran) ; sans cela ils
     se plaçaient par rapport à la page, échappaient au défilement de main, et allongeaient le
     document : la page entière se mettait à défiler sur les écrans à grille. */
  main { overflow:auto; position:relative; }
  /* La page prend la largeur de l'ecran. Elle s'arretait a 1560 px et le vide
     s'entassait a droite, sous une barre du haut qui allait jusqu'au bord : l'ecran
     avait l'air casse. Seuls les blocs de prose poses sur la page gardent leur mesure,
     une ligne de 200 caracteres ne se lit pas. Les tables et les cartes s'etalent. */
  main > .page { padding:24px 26px; max-width:none; }
  main > .page > p, main > .page > .note { max-width:108ch; }
  h1 { font-size:22px; margin:0 0 2px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .sub { color:var(--muted); margin:0 0 18px; }
  .fil { color:var(--muted); font-size:13px; margin-bottom:10px; } .fil a { cursor:pointer; } .fil a:hover { color:var(--primary); }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:18px; }
  .card h2 { font-size:15px; margin:0 0 12px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; } .card h3 { font-size:13px; margin:16px 0 8px; color:var(--ink-soft); }
  .card h2 .prog { font-size:11.5px; color:var(--muted); font-weight:500; }
  .grid { display:grid; gap:16px; } .grid > * { min-width:0; } .g4{grid-template-columns:repeat(4,1fr);} .g5{grid-template-columns:repeat(5,1fr);} .g2{grid-template-columns:1fr 1fr;} .g3{grid-template-columns:repeat(3,1fr);align-items:start;} .g21{grid-template-columns:2fr 1fr;}
  @media(max-width:900px){.g4,.g5,.g2,.g21,.g3{grid-template-columns:1fr 1fr;}}
  /* Les trois moments ou une piece arrive : le meme geste, a trois endroits. */
  .moments { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:16px 0; }
  .moment { border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px 12px; background:var(--surface); cursor:pointer; transition:border-color .12s, box-shadow .12s; }
  .moment:hover { border-color:var(--primary); box-shadow:0 2px 10px rgba(20,30,50,.07); }
  .moment .mh { display:flex; align-items:baseline; gap:8px; }
  .moment .mh b { font-size:15px; } .moment .quand { font-size:11.5px; color:var(--muted); }
  .moment .mn { display:flex; align-items:baseline; gap:7px; margin:7px 0 6px; }
  .moment .mn .v { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
  .moment .mn .l { font-size:12px; color:var(--muted); }
  .moment .mg { margin-top:8px; padding-top:7px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); }
  /* Lire : les types de pieces */
  .card.tbl { overflow-x:auto; } .card.tbl table { min-width:max-content; }
  /* La table des applications explique, elle ne se parcourt pas : ses cellules reviennent
     a la ligne pour tenir dans la carte, au lieu de pousser la derniere colonne dehors. */
  table.ailleurs { min-width:0; table-layout:fixed; }
  /* Meme regle pour la table d'entrees-sorties de la page Dev : ses cellules sont des
     phrases, elles reviennent a la ligne au lieu d'elargir la table. */
  table.devio { min-width:0; table-layout:fixed; }
  table.devio th:nth-child(1), table.devio td:nth-child(1) { width:16%; }
  table.devio td { vertical-align:top; }
  table.ailleurs th:nth-child(1), table.ailleurs td:nth-child(1) { width:17%; }
  table.ailleurs th:nth-child(2), table.ailleurs td:nth-child(2) { width:24%; }
  table.ailleurs th:nth-child(3), table.ailleurs td:nth-child(3) { width:26%; }
  table.ailleurs td { vertical-align:top; }
  table.ailleurs .chip { display:inline-block; margin:0 3px 3px 0; }
  .types { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px; margin-top:16px; }
  .type { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:12px 14px; cursor:pointer; transition:border-color .12s; }
  .type:hover { border-color:var(--primary); }
  .type b { display:block; font-size:14px; } .type .n { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
  .type .s { display:block; font-size:11.5px; margin-top:6px; }
  /* Etudier : la frise d'un assure */
  /* Etudier : le graphe des points de contact */
  .graphe { width:100%; height:auto; margin:4px 0 12px; }
  .graphe line { stroke:var(--line); stroke-width:1.5; }
  .graphe text { font-size:8.5px; fill:var(--muted); font-family:inherit; }
  .graphe circle { stroke:var(--surface); stroke-width:2; }
  .graphe .n-assure { fill:var(--primary); } .graphe .n-hi { fill:var(--hi); }
  .graphe .n-md { fill:var(--md); } .graphe .n-lo { fill:var(--lo); } .graphe .n-rib { fill:var(--ink-soft); }
  /* Agir : un geste par moment */
  .file { border:1px solid var(--line); border-radius:9px; padding:9px 11px; margin-bottom:8px; background:var(--bg); }
  .file .fl-h { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .file .fl-id { font-weight:600; font-size:13px; cursor:pointer; color:var(--primary); }
  .file .fl-id:hover { text-decoration:underline; }
  .file .fl-q { font-size:12px; color:var(--muted); margin:3px 0 7px; }
  .file .fl-b { display:flex; gap:6px; flex-wrap:wrap; }
  .pg { border:1px solid var(--line); background:var(--surface); border-radius:7px; padding:4px 9px; font:inherit; font-size:11.5px; color:var(--ink-soft); cursor:pointer; }
  .pg:hover { border-color:var(--primary); color:var(--primary); }
  .geste { border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; background:var(--surface); }
  .geste .gh { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .geste .gg { font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:8px; }
  .sc-lien { color:var(--primary); cursor:pointer; font-size:12.5px; }
  .sc-lien:hover { text-decoration:underline; }
  .etiq.mom { background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); }
  h3.rang { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin:24px 0 10px; }
  .kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; position:relative; }
  .kpi[data-go] { cursor:pointer; } .kpi[data-go]:hover { border-color:var(--primary); } .kpi[data-go]::after { content:"›"; position:absolute; right:14px; top:12px; color:var(--muted); font-size:16px; }
  /* Une carte de portee allumee est un filtre pose : on doit voir ce qu'on a choisi. */
  .kpi[data-portee] { cursor:pointer; }
  .kpi[data-portee]:hover { border-color:var(--primary); }
  .kpi[data-portee].on { border-color:var(--primary); background:var(--primary-weak); }
  .kpi[data-portee].on .v { color:var(--primary); }
  /* La rangee de tuiles de la page des composants est un choix, pas une liste de
     liens : la tuile allumee commande la fiche lue dessous, et son chevron devient
     une croix parce qu'un second clic ramene les autres. */
  .compo-choix .kpi.on { border-color:var(--primary); background:var(--primary-weak);
    box-shadow:0 0 0 1.5px var(--primary); }
  .compo-choix .kpi.on::after { content:"×"; color:var(--primary); font-size:17px; }
  .kpi .v { font-size:26px; font-weight:700; } .kpi .l { color:var(--muted); font-size:12.5px; margin-top:2px; } .kpi .t{font-size:11.5px;margin-top:6px;} .up{color:var(--hi);}
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th,td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
  th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; white-space:nowrap; }
  th[data-tri] { cursor:pointer; } th[data-tri]:hover { color:var(--ink); } th .fl { font-size:10px; margin-left:3px; }
  tbody tr[data-go] { cursor:pointer; } tbody tr[data-go]:hover { background:var(--surface-2); }
  tbody tr[data-go] td:first-child { color:var(--primary); font-weight:600; white-space:nowrap; }
  td.coupe { max-width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  td.coupe.court { max-width:150px; } td.coupe.mi { max-width:190px; }
  td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; } td.chev { width:18px; color:var(--muted); text-align:right; padding-left:0; }
  .badge { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
  .badge .dot { width:8px; height:8px; border-radius:50%; }
  .b-hi{background:var(--hi-w);color:var(--hi);} .b-hi .dot{background:var(--hi);} .b-md{background:var(--md-w);color:var(--md);} .b-md .dot{background:var(--md);} .b-lo{background:var(--lo-w);color:var(--lo);} .b-lo .dot{background:var(--lo);}
  .etiq { display:inline-block; padding:1px 8px; border-radius:6px; font-size:11.5px; white-space:nowrap; background:var(--surface-2); color:var(--ink-soft); }
  .etiq.regler{background:var(--lo-w);color:var(--lo);} .etiq.completer{background:var(--md-w);color:var(--md);} .etiq.enquete{background:var(--hi-w);color:var(--hi);}
  /* Les trois decisions du sinistre : l'expertise attend, le partiel regle a moitie, le refus ferme. */
  .etiq.expert{background:var(--primary-weak);color:var(--primary);} .etiq.partiel{background:var(--md-w);color:var(--md);} .etiq.refus{background:var(--hi-w);color:var(--hi);}
  .etiq.conforme{background:var(--lo-w);color:var(--lo);} .etiq.redemander{background:var(--md-w);color:var(--md);} .etiq.douteuse{background:var(--hi-w);color:var(--hi);}
  .filtres { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:12px; }
  .filtre { border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:3px 11px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; }
  .filtre b { font-weight:600; color:var(--muted); margin-left:3px; } .filtre.on { border-color:var(--primary); color:var(--primary); background:var(--primary-weak); } .filtre.on b { color:var(--primary); }
  .cherche { border:1px solid var(--line); border-radius:8px; padding:6px 10px; font:inherit; font-size:12.5px; margin-left:auto; width:260px; }
  /* Un signal est une ligne dans sa carte, pas une carte dans la carte : le liseré
     de gravité à gauche suffit à le détacher, la carte a déjà son cadre. */
  .signal { border-left:3px solid var(--line); padding:3px 0 4px 12px; margin-bottom:12px; } .signal:last-child { margin-bottom:2px; }
  .signal.hi{border-left-color:var(--hi);} .signal.md{border-left-color:var(--md);} .signal.lo{border-left-color:var(--lo);}
  .signal .t { font-weight:600; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; line-height:1.35; }
  .signal .sev { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1; border-radius:999px; padding:4px 9px; flex:none; white-space:nowrap; margin-top:1px; }
  .signal.hi .sev{background:var(--hi-w);color:var(--hi);} .signal.md .sev{background:var(--md-w);color:var(--md);} .signal.lo .sev{background:var(--lo-w);color:var(--lo);}
  .signal .d { color:var(--ink-soft); font-size:12.5px; margin-top:3px; }
  /* Chaque signal a sa raison : ce qui laisse la trace, ce qui l'expliquerait sans fraude. */
  .signal .raison { color:var(--ink-soft); font-size:12.5px; margin-top:7px; }
  .signal .raison b { display:block; color:var(--ink); font-size:12px; font-weight:600; margin-bottom:1px; }
  .signal .o { color:var(--muted); font-size:11px; margin-top:5px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:3px 10px; align-items:baseline; } .signal .o .lien { white-space:nowrap; } .signal .o .orig { font-family:var(--mono); }
  .lien { background:none; border:0; padding:0; color:var(--muted); font-size:11.5px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
  .lien:hover { color:var(--primary); } .lien.done { color:var(--lo); text-decoration:none; cursor:default; }
  .action > span { display:block; }
  .action { display:flex; gap:8px; align-items:baseline; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13px; } .action:last-child{border-bottom:0;} .action b{color:var(--ink);}
  /* Le message de demande : un bloc par pièce, le texte tel qu'il partira. */
  .msg { border:1px solid var(--line); border-radius:var(--radius); padding:12px 13px; margin-bottom:11px; background:var(--surface-2); }
  .msg:last-child { margin-bottom:0; }
  .msg .mh { display:flex; justify-content:space-between; gap:10px; align-items:baseline; font-size:13px; font-weight:600; }
  .msg .mh span { font-weight:500; color:var(--muted); font-size:11.5px; white-space:nowrap; }
  .msg .mou { font-size:11.5px; color:var(--muted); margin:4px 0 8px; line-height:1.5; }
  .msg .mou b, .msg .mch b { color:var(--ink); font-weight:600; }
  .msg .mch { font-size:11.5px; color:var(--ink-soft); margin:0 0 9px; line-height:1.5; }
  .msg .mch .mrem { color:var(--muted); }
  .msg .mt { white-space:pre-wrap; font-size:12.5px; line-height:1.6; background:var(--surface); border:0;
             border-radius:8px; padding:10px 11px; margin:0; font-family:inherit; color:var(--ink); }
  .msg .mb { display:flex; gap:9px; align-items:center; margin-top:8px; }
  .msg .mb .etat { font-size:11.5px; color:var(--muted); }
  .muted{color:var(--muted);} .small{font-size:12px;} .flag{color:var(--hi);font-weight:600;}
  /* Une ligne en cause se voit avant de se lire : fond teinté, filet à gauche. */
  tr.alerte td { background:#fffafa; } tr.alerte td:first-child { box-shadow:inset 3px 0 0 var(--hi); }
  tr.souligne td { background:#fffdf3; } tr.souligne td:first-child { box-shadow:inset 3px 0 0 var(--md); }
  /* L'état d'un dossier, en trois cases sous le score : où il en est se lit avant le détail. */
  .etats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:14px; border-top:1px solid var(--line); }
  .etats > div { padding:12px 16px 2px 0; } .etats > div + div { padding-left:16px; border-left:1px solid var(--line); }
  .etats .l { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  .etats .v { font-size:15px; font-weight:650; margin-top:3px; } .etats .v.attente { color:var(--md); } .etats .v.fait { color:var(--lo); } .etats .v.alerte { color:var(--hi); }
  .etats .d { font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.45; }
  .niv-ligne { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); display:flex; gap:6px 22px; flex-wrap:wrap; }
  .niv-ligne b { color:var(--ink); }
  /* La décision sur un assuré ou un prestataire : le mot retenu, qui, quand, pourquoi, puis de quoi en changer. */
  .niv { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
  .niv .l { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  .niv .v { font-size:15px; font-weight:650; margin-top:3px; } .niv .v.attente { color:var(--md); } .niv .v.fait { color:var(--lo); } .niv .v.alerte { color:var(--hi); }
  .niv .d { font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.45; }
  .niv-choix { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
  .niv-saisie { display:flex; gap:8px; align-items:center; margin-top:8px; }
  .niv-saisie input { flex:1; min-width:0; font:inherit; font-size:12.5px; border:0; border-bottom:1px solid var(--line); background:transparent; padding:5px 2px; color:var(--ink); }
  .niv-saisie input:focus { outline:none; border-bottom-color:var(--primary); }
  @media (max-width:900px){ .etats { grid-template-columns:1fr; } .etats > div + div { padding-left:0; border-left:0; border-top:1px solid var(--line); } }
  .dev table td { white-space:normal; vertical-align:top; } .dev table td code { font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); }
  .journal { list-style:none; margin:0; padding:0; } .journal li { display:grid; grid-template-columns:78px 1fr; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px; line-height:1.45; }
  .journal li:last-child { border-bottom:0; } .journal .q { color:var(--muted); font-variant-numeric:tabular-nums; font-size:11.5px; padding-top:1px; }
  .journal .p { font-weight:600; } .journal li.auto .p { font-weight:500; color:var(--ink-soft); } .journal .c { color:var(--ink-soft); }
  /* Le rapport d'analyse : la trace des appels apparaît un par un, le corps ensuite. */
  .etiq.rapport { background:var(--primary-weak); color:var(--primary); cursor:pointer; font-weight:600; }
  /* L'onglet Dev : le schema de donnees en SVG, les arbres en boites reliees. A plat,
     sans ombre : c'est un plan, pas une illustration. */
  .dev .defile { overflow-x:auto; }
  .dev svg.schema { display:block; width:100%; min-width:900px; height:auto; font-family:inherit; }
  .dev .ent rect { fill:var(--surface); stroke:var(--line); stroke-width:1.2; }
  .dev .ent .tete { fill:var(--surface-2); stroke:none; }
  .dev .ent.fort rect { stroke:var(--primary); stroke-width:1.6; } .dev .ent.fort .tete { fill:var(--primary-weak); stroke:none; }
  .dev .ent .nom { font-size:13px; font-weight:700; fill:var(--ink); } .dev .ent .nb { font-size:12.5px; font-weight:700; fill:var(--primary); }
  .dev .ent .ch { font-size:11.5px; fill:var(--ink-soft); }
  .dev .lien { fill:none; stroke:var(--muted); stroke-width:1.4; } .dev .lien.tirets { stroke-dasharray:5 4; }
  .dev .lien.fort { stroke:var(--primary); stroke-width:2.2; }
  .dev .card { font-size:10.5px; fill:var(--muted); font-weight:600; }
  .dev .arbre { display:inline-block; padding:4px 2px 2px; }
  .dev .noeud { display:flex; align-items:center; }
  .dev .q { flex:none; width:176px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2);
            font-size:12.5px; font-weight:600; line-height:1.4; position:relative; }
  .dev .q::after { content:""; position:absolute; left:100%; top:50%; width:22px; border-top:1.4px solid var(--muted); }
  .dev .branches { display:flex; flex-direction:column; gap:9px; margin-left:22px; }
  .dev .br { display:flex; align-items:center; position:relative; padding-left:20px; }
  .dev .br::before { content:""; position:absolute; left:0; top:50%; width:20px; border-top:1.4px solid var(--muted); }
  .dev .br::after { content:""; position:absolute; left:0; top:-4.5px; bottom:-4.5px; border-left:1.4px solid var(--muted); }
  .dev .br:first-child::after { top:50%; } .dev .br:last-child::after { bottom:50%; }
  .dev .br:only-child::after { display:none; }
  .dev .si { flex:none; box-sizing:content-box; text-align:center; font-size:11px; font-weight:600; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line);
             border-radius:999px; padding:2px 9px; margin-right:10px; white-space:nowrap; position:relative; z-index:1; }
  .dev .feuille { flex:none; width:250px; padding:8px 11px; border:1px solid var(--primary); border-radius:8px; background:var(--primary-weak);
                  font-size:12px; line-height:1.4; display:flex; flex-direction:column; gap:2px; }
  .dev .feuille b { font-size:12.5px; color:var(--ink); } .dev .feuille span { color:var(--ink-soft); }
  .dev .feuille a { color:var(--primary); cursor:pointer; font-size:11.5px; font-weight:600; margin-top:2px; }
  .dev .feuille.rien { border-color:var(--line); background:var(--surface); } .dev .feuille.rien b { color:var(--muted); }
  .dev .seuils { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
  .dev .seuils .s { font-size:12px; font-weight:600; border-radius:999px; padding:4px 12px; }
  .dev .seuils .lo { background:var(--lo-w); color:var(--lo); } .dev .seuils .md { background:var(--md-w); color:var(--md); } .dev .seuils .hi { background:var(--hi-w); color:var(--hi); }
  .rap .plan { font-size:14px; line-height:1.65; margin:0; }
  .rap ol.trace { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
  .rap ol.trace li { display:grid; grid-template-columns:24px 170px 1fr; gap:10px; align-items:start; font-size:12.5px; line-height:1.5; opacity:0; transform:translateY(4px); transition:opacity .25s, transform .25s; }
  .rap ol.trace li.vu { opacity:1; transform:none; }
  .rap ol.trace .n { width:22px; height:22px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:11px; }
  .rap ol.trace .outil { font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); padding-top:3px; }
  .rap .corps { opacity:0; transition:opacity .4s; } .rap .corps.vu { opacity:1; }
  .rap .corps .card p { font-size:14px; line-height:1.65; margin:0 0 10px; } .rap .corps .card p:last-child { margin-bottom:0; }
  /* L'atelier de versions : un filet, des onglets, une consigne. Aucun cadre de plus. */
  .vers { margin-top:10px; padding-top:9px; border-top:1px solid var(--line); }
  .rap .vers { margin:0 0 10px; padding:0; border-top:0; }
  /* Réécrire : une rangée de choix, un lecteur pour un rapport, un ton pour un message.
     Celui qui est allumé est celui qui reste au dossier et qui part. */
  .rap .rapports { margin:2px 0 14px; }
  .vers-choix { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .vers-choix .vers-l { font-size:11.5px; font-weight:600; color:var(--muted); margin-right:4px; }
  .vers-boutons { display:contents; }
  .vers-boutons button { font:inherit; font-size:12px; border:0; background:var(--surface-2); color:var(--ink-soft); border-radius:999px; padding:4px 11px; cursor:pointer; }
  .vers-boutons button:hover { color:var(--primary); }
  .vers-boutons button.on { background:var(--primary); color:#fff; }
  .vers-libre { flex:1 1 180px; min-width:140px; font:inherit; font-size:12px; border:0; border-bottom:1px solid var(--line); background:transparent; padding:4px 2px; color:var(--ink); }
  .vers-libre:focus { outline:none; border-bottom-color:var(--primary); }
  .msg .vers { margin:10px 0 8px; padding-top:0; border-top:0; }
  .msg .vers-boutons button:not(.on) { background:var(--surface); }
  /* Une page de rapport est tout entiere le travail d'une brique : ses cartes portent
     le cadre du widget, comme les blocs d'une piece. Le filet autour d'une carte suffit,
     un cadre de plus par-dessus ferait une boite dans une boite. */
  .rap .corps .card, .rap details.trace-bloc .card, .wg-rap .card, .wg-rap .note {
    border-color:transparent; box-shadow:none; background:var(--bg); }
  .rap details.trace-bloc > summary { cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-soft); padding:4px 2px 10px; }
  .rap details.trace-bloc[open] > summary { color:var(--muted); font-weight:500; }
  /* Ce qui est arrivé : le message, puis une pièce par onglet. */
  /* De vrais onglets, sur une ligne : un filet sous la rangée, un trait plein sous
     celui qui est ouvert, une icône qui dit la nature. Rien d'autre dans l'onglet que
     son nom : l'expéditeur et la date sont en tête du message. */
  .ong-doc { display:flex; align-items:stretch; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; overflow-y:hidden; }
  .ong-doc button { display:flex; align-items:center; gap:7px; border:0; background:none; cursor:pointer;
    padding:7px 12px 6px; margin-bottom:-1px; font:inherit; font-size:12.5px; color:var(--muted);
    border-bottom:2px solid transparent; border-radius:7px 7px 0 0; white-space:nowrap; }
  .ong-doc button:hover { color:var(--ink); background:var(--surface-2); }
  .ong-doc button.on { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
  .ong-doc button svg { width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round; opacity:.7; }
  .ong-doc button.on svg { opacity:1; }
  /* Le point d'un onglet : cette pièce a des anomalies. Il se voit avant le clic,
     c'est tout ce qu'on lui demande. */
  .ong-doc button i { width:6px; height:6px; border-radius:50%; background:var(--hi); flex:none; margin-left:-2px; }
  /* La fiche d'un grand compte : ses onglets passent à la ligne plutôt que de cacher le dernier hors
     de la rangée (à 1271 px, « Documents » ne se voyait qu'en la faisant défiler, 12-10). Au
     téléphone, la rangée défile comme les autres. */
  @media(min-width:701px){ .ong-doc.gc-onglets { flex-wrap:wrap; overflow-x:visible; } }
  .arr .arr-ongl { margin:-2px 0 12px; }
  /* Sur un portable, la colonne de gauche n'a plus la place de tous les onglets d'un
     dossier : on les resserre plutôt que de pousser le journal hors de vue. */
  @media (max-width:1366px){ .arr .arr-ongl button { padding:7px 8px 6px; gap:5px; } }
  /* La même barre au-dessus du lecteur d'une pièce : on change ce qu'on regarde,
     pas l'écran où l'on est. */
  .doc > .arr-ongl { flex:none; padding:0 6px; background:var(--surface); }
  /* Les deux colonnes d'un dossier : à gauche ce qui est arrivé, à droite ce que la
     machine en dit. La colonne de droite suit le défilement, parce qu'on lit une
     pièce à gauche en gardant le score sous les yeux. */
  .dos-deux { align-items:start; }
  /* La colonne de gauche reste à l'écran pendant qu'on descend dans celle de droite :
     on clique un point en bas, on voit sa phrase en haut. `sticky` ne tient que si la
     cellule est aussi haute que la rangée : sinon elle remonte avec sa carte. */
  .dos-deux > :first-child { align-self:stretch; }
  .dos-deux .arr { position:sticky; top:0; }
  /* La pièce ouverte, dans le panneau de gauche : le lecteur prend une hauteur fixe
     et défile chez lui, pour que le titre et la colonne de droite restent en place.
     Pas de cadre à lui : la carte du dossier l'encadre déjà, et un second cadre
     faisait des propriétés du fichier une boîte dans une boîte dans une boîte. */
  .arr-vol > .doc { height:calc(100vh - 210px); min-height:420px; overflow:hidden; }
  /* Son analyse, dans la colonne de droite : ici elle suit la page, elle n'a pas de
     défilement à elle comme dans une colonne pleine hauteur. */
  .dos-droite .concl.deux { grid-template-columns:auto minmax(0,1fr); }
  .dos-droite > .ana { overflow:visible; background:transparent; }
  .dos-droite > .ana .ana-body { overflow:visible; padding:0 0 6px; }
  .dos-droite > .ana .barre.pgestes { border:1px solid var(--line); border-radius:10px; background:var(--surface); }
  /* ---- Deux colonnes dont on règle la largeur ----
     Aucune proportion n'est la bonne pour tout le monde : lire une pièce demande de
     la place à gauche, relire des contrôles en demande à droite. La poignée prend
     l'espace qui séparait les deux colonnes, elle ne se voit qu'au survol, et la
     proportion choisie est gardée d'une visite à l'autre. */
  .deux-cols { grid-template-columns:var(--gauche,1.6fr) 16px minmax(0,1fr); gap:0; }
  /* `align-self:stretch` n'est pas un detail : avec `align-items:start`, une colonne
     vide n'a aucune hauteur, et il n'y a rien a attraper. */
  .poignee { cursor:col-resize; position:relative; align-self:stretch; min-height:80px; }
  .poignee::before { content:""; position:absolute; top:2px; bottom:2px; left:50%; width:3px; margin-left:-1.5px;
    border-radius:3px; background:transparent; transition:background .12s; }
  .poignee:hover::before, .poignee.tire::before { background:var(--primary); }
  /* Chaque bloc de la colonne garde sa marge, le dernier aussi : la carte de décision
     suit la grille des deux colonnes, et sans marge elle collait au dernier bloc de la
     colonne (l'auteur, le 23-09 : « le bloc décision est trop collé »). */
  .dos-droite > * { margin-bottom:16px; }
  .dos-fam { display:inline-block; margin-left:8px; padding:1px 9px; border-radius:20px; background:var(--surface-2);
    border:1px solid var(--line); font-size:11.5px; color:var(--ink-soft); vertical-align:1px; }
  /* Le contexte d'un dossier (.frise-ligne) et les frises verticales (.hist-l, .vchaine,
     .arr-parc .parc) vivent dans assets/frise_verticale.css, chargée juste après. */
  .arr table { margin-top:4px; }
  /* Les pièces jointes du message : on les voit avant de les ouvrir, comme dans une
     messagerie. Un clic mène à l'onglet de la pièce, pas encore à l'atelier. */
  .arr-jointes { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:6px; }
  /* Dans une carte, rien ne porte de cadre : un fond teinté suffit, et deux bordures
     emboîtées font du désordre sans rien dire de plus. */
  .arr-jointe { display:flex; gap:9px; align-items:flex-start; text-align:left; border:0; background:var(--bg);
    border-radius:10px; padding:8px 9px; cursor:pointer; font:inherit; }
  .arr-jointe:hover { box-shadow:0 0 0 1.5px var(--primary); }
  .arr-jointe img { width:36px; height:46px; object-fit:cover; object-position:top; border-radius:4px; background:#fff; border:0; flex:none; }
  .arr-jointe span { display:block; font-size:11.5px; line-height:1.4; color:var(--muted); min-width:0; }
  .arr-jointe b { display:block; font-size:12.5px; color:var(--ink); }
  .arr-jointe i { display:block; font-style:normal; font-size:11px; }
  .arr-tete { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
  .arr-tete b { font-size:14px; } .arr-tete .muted { font-size:12px; }
  .arr-tete .btn { margin-left:auto; padding:5px 11px; font-size:12.5px; }
  .arr-mail p { margin:0 0 9px; font-size:13.5px; line-height:1.7; } .arr-mail p:last-child { margin-bottom:0; }
  .arr-page { background:#e3e6ec; border-radius:8px; padding:10px; max-height:420px; overflow:auto; }
  .arr-page img { display:block; width:100%; max-width:620px; margin:0 auto; background:#fff; box-shadow:0 1px 5px rgba(20,38,59,.18); }
  .vers-onglets { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; align-items:center; }
  .vers-onglets > span { font-size:11.5px; color:var(--muted); margin-right:2px; }
  .vers-onglets button { font:inherit; font-size:11.5px; border:0; background:var(--surface-2); color:var(--ink-soft); border-radius:999px; padding:3px 10px; cursor:pointer; }
  .vers-onglets button:hover { color:var(--primary); } .vers-onglets button.on { background:var(--primary); color:#fff; }
  .vers-onglets button.brouillon { background:var(--md-w); color:var(--md); } .vers-onglets button.brouillon.on { background:var(--md); color:#fff; }
  .vers-saisie { display:flex; gap:8px; align-items:center; }
  .vers-saisie input { flex:1; min-width:0; font:inherit; font-size:12.5px; border:0; border-bottom:1px solid var(--line); background:transparent; padding:5px 2px; color:var(--ink); }
  .vers-saisie input:focus { outline:none; border-bottom-color:var(--primary); }
  .vers-puces { display:flex; gap:4px 12px; flex-wrap:wrap; margin-top:6px; font-size:11.5px; color:var(--muted); }
  .vers-puces a { color:var(--primary); cursor:pointer; text-decoration:underline dotted; text-underline-offset:2px; }
  .vers-etat { font-size:12px; color:var(--muted); margin-top:7px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-height:22px; }
  .vers-etat .lien { font:inherit; font-size:12px; border:0; background:none; color:var(--primary); cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px; }
  .vers-src { font-size:11px; white-space:nowrap; flex:none; opacity:.85; }
  .msg .mt[contenteditable]:focus { outline:2px solid var(--primary-weak); }
  .note { background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--primary); border-radius:var(--radius); padding:14px 16px; font-size:13px; color:var(--ink-soft); margin-bottom:18px; } .note b{color:var(--ink);}
  .bar { height:7px; border-radius:4px; background:var(--surface-2); overflow:hidden; display:block; } .bar>i{display:block;height:100%;background:var(--primary);}
  .scen { display:grid; grid-template-columns:1fr 34px 90px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:13px; } .scen:last-child{border-bottom:0;} .scen .n{font-weight:700;text-align:right;}
  .peer { position:relative; height:22px; background:var(--surface-2); border-radius:6px; } .peer .band { position:absolute; top:0; bottom:0; background:#e6d6d6; border-radius:6px; }
  .peer .me { position:absolute; top:-3px; bottom:-3px; width:3px; background:var(--ink); border-radius:2px; } .peer .me.hors { background:var(--hi); }
  .chip { display:inline-block; padding:1px 8px; border-radius:6px; background:var(--surface-2); color:var(--ink-soft); font-size:11.5px; white-space:nowrap; }
  /* ---- Les composants de lecture, et la pastille qui les nomme ----
     Des briques construites une fois, et posées partout où un document arrive.
     La pastille dit quel composant a produit ce qu'on lit, et elle ouvre sa fiche.
     Bleu d'action, jamais rouge : ce n'est pas un signal, c'est une provenance. */
  .compos { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; vertical-align:middle; }
  /* Un titre de bloc est etale entre ses bords. La pastille qui suit le titre se
     retrouvait au milieu, entre le titre et le compteur de droite, comme si elle
     flottait. Elle appartient au titre : elle le suit, le compteur reste a droite. */
  h2 > .compos:not(:last-child), h3 > .compos:not(:last-child) { margin-right:auto; }
  /* Une pastille de composant dit d'ou sort ce qu'on lit. Le filet a gauche et
     l'etincelle la distinguent d'une etiquette de rubrique : ce bloc n'a pas ete tape
     par une personne, il a ete produit. */
  .compo::before { content:"✦"; font-size:9px; line-height:1; opacity:.9; }
  /* Le violet n'est employe QUE par les composants, nulle part ailleurs dans l'outil :
     c'est ce qui fait qu'on reconnait d'un coup d'oeil ce qui a ete produit par une
     machine et ce qui a ete pose par une personne. */
  .compo { display:inline-flex; align-items:center; gap:5px; padding:2px 9px 2px 7px; border-radius:999px;
    border:1px solid var(--ia-l); background:var(--ia-w); color:var(--ia);
    font-size:11px; font-weight:700; letter-spacing:.01em; white-space:nowrap; cursor:pointer; }
  .compo svg { width:13px; height:13px; flex:none; }
  .compo:hover { background:var(--ia); border-color:var(--ia); color:#fff; }
  /* Le nom d'un composant cite dans un libelle de lien : « creer un rapport d'analyse
     avec AI Insights ». Meme violet que la pastille, pour qu'on relie le mot a la brique
     sans avoir a l'expliquer. */
  .compo-nom { display:inline-flex; align-items:center; gap:4px; vertical-align:-4px; padding:1px 8px 1px 6px;
    border-radius:999px; border:1px solid var(--ia-l); background:var(--ia-w); color:var(--ia);
    font-size:11px; font-weight:700; line-height:1.5; white-space:nowrap; }
  .compo-nom svg { width:12px; height:12px; flex:none; }
  /* ---- Un bloc rendu par une brique se voit comme un composant pose la ----
     Une tete qui le cadre et le nomme, un pied qui dit son contrat. Rien sur les
     cotes : un filet vertical retrecit la carte et pousse les champs dehors. */
  .panel h2.wg-tete, .card h2.wg-tete, h2.wg-tete { background:var(--ia-w); border:1px solid var(--ia-l);
    border-radius:9px; padding:6px 10px; margin:0 0 10px; }
  /* Quand le bloc porte lui-même le cadre du widget, sa tête n'a plus besoin du sien :
     un cadre dans un cadre dans une pastille fait trois traits pour une seule idée
     (c'est ce que compte controles/check_bordures.py). Un filet sous le titre suffit. */
  .panel:has(> h2 .compos) > h2.wg-tete, .card:has(> h2 .compos) > h2.wg-tete, details.panel:has(> summary .compos) > summary.wg-tete,
  .doc-meta > h3.wg-tete, .scn-ia > h3.wg-tete {
    background:none; border:0; border-bottom:1px solid var(--ia-l); border-radius:0; padding:0 0 8px; margin:0 0 11px; }
  /* Le widget lui-meme : ce qui porte la pastille d'une brique se detache du reste de
     l'ecran. Filet violet, coins arrondis, ombre douce. Ce qui n'en porte pas est une
     donnee du dossier ou un geste du gestionnaire, et reste plat. */
  .panel:has(> h2 .compos), .panel:has(> div > .compos), details.panel:has(> summary .compos) { border:1px solid var(--ia-l); border-radius:12px;
    background:var(--surface); padding:12px 13px 13px; margin-bottom:14px;
    box-shadow:0 1px 2px rgba(106,63,181,.07), 0 8px 20px rgba(106,63,181,.09); }
  .card:has(> h2 .compos), .card:has(> .tbl-source), .classe.bande { border-color:var(--ia-l);
    box-shadow:0 1px 2px rgba(106,63,181,.07), 0 8px 20px rgba(106,63,181,.09); }
  .txt-scene:has(.compos) { border:1px solid var(--ia-l); border-radius:12px;
    box-shadow:0 1px 2px rgba(106,63,181,.07), 0 8px 20px rgba(106,63,181,.09); }
  /* Demander le travail d'une brique, c'est un geste, pas un lien perdu dans une ligne
     de compteurs. Bouton plein cadre, aux couleurs de la brique, avec son nom en second. */
  .btn-ia { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ia-l); background:var(--ia-w); color:var(--ia);
    border-radius:9px; padding:7px 13px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
    transition:background .12s, border-color .12s, color .12s; }
  .btn-ia:hover { background:var(--ia); border-color:var(--ia); color:#fff; box-shadow:0 2px 8px rgba(106,63,181,.22); }
  .btn-ia svg { width:15px; height:15px; flex:none; }
  .btn-ia .q { font-weight:500; opacity:.75; font-size:11.5px; }
  .rap-act { margin-top:10px; } .rap-act .btn-ia { max-width:100%; white-space:normal; text-align:left; flex-wrap:wrap; }
  /* Un rapport est rendu d'un bloc, par une seule brique : la page entiere est son
     widget. Une tete qui le nomme et dit ce qu'il a coute, le contenu, un pied qui dit
     son contrat. Rien ne repete la pastille a l'interieur, le cadre le dit une fois. */
  .wg-rap { border:1px solid var(--ia-l); border-radius:14px; background:var(--surface); margin-bottom:18px;
    box-shadow:0 1px 2px rgba(106,63,181,.07), 0 10px 26px rgba(106,63,181,.10); }
  .wg-rap-tete { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; background:var(--ia-w);
    border-bottom:1px solid var(--ia-l); border-radius:13px 13px 0 0; padding:11px 16px 10px; }
  .wg-rap-tete h1 { font-size:19px; margin:0; }
  .wg-rap-tete h1 .o { font-weight:500; font-size:14px; color:var(--ink-soft); }
  .wg-rap-tete .m { margin-left:auto; font-size:11.5px; line-height:1.5; color:var(--muted); text-align:right; }
  .wg-rap-corps { padding:14px 16px 0; }
  /* Le « i » d'un bloc : ce que son composant reçoit et rend, à la demande, dans une
     bulle. Un bloc ne porte plus de pied qui l'explique. Au repos c'est un glyphe, sans
     bordure : un rond cerclé dans le bloc IA d'une carte faisait un troisième cadre
     emboîté (check_bordures). Le rond n'apparaît qu'au survol. */
  .compo-i { display:inline-grid; place-items:center; width:17px; height:17px; margin:0 0 0 4px; padding:0; flex:none;
    border-radius:50%; border:1px solid transparent; background:transparent; color:var(--ia);
    font:italic 700 11px/1 Georgia, serif; cursor:pointer; vertical-align:middle; }
  .compo-i:hover, .compo-i:focus-visible { background:var(--ia-w); border-color:var(--ia); outline:none; }
  .compo-info { position:fixed; z-index:95; width:320px; max-width:calc(100vw - 24px); background:var(--surface);
    border:1px solid var(--ia-l); border-radius:10px; box-shadow:0 10px 30px rgba(20,30,50,.16); padding:10px 12px;
    font-size:12px; line-height:1.5; color:var(--ink); text-align:left; font-weight:400; text-transform:none; letter-spacing:0; }
  .compo-info b { display:flex; align-items:center; gap:5px; color:var(--ia); font-size:13px; }
  .compo-info b svg { width:13px; height:13px; flex:none; }
  .compo-info p { margin:6px 0 0; }
  .compo-info p .lab { display:inline-block; width:48px; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ia); font-weight:700; }
  .compo-info p.n { color:var(--muted); border-top:1px dashed var(--ia-l); padding-top:6px; }
  .compo-info a { display:inline-block; margin-top:8px; color:var(--primary); font-weight:600; cursor:pointer; }
  /* L'interface d'une brique, sur sa fiche : ce qu'on lui envoie, ce qu'elle renvoie.
     C'est ce qui permet de la brancher ailleurs, donc ça se lit avant ce qu'elle sait
     faire. */
  .compo-api { border:1px solid var(--ia-l); background:var(--ia-w); border-radius:10px; padding:9px 12px 8px; margin:0 0 14px; }
  .compo-api > div { font-size:12px; line-height:1.55; display:flex; gap:9px; }
  .compo-api .lab { flex:none; width:44px; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ia); font-weight:700; padding-top:3px; }
  .compo-api p { margin:6px 0 0; font-size:11px; color:var(--muted); }
  /* Pas de filet sur le panneau : trois pixels de bordure retrecissaient la carte et
     poussaient les champs dehors (42 debords releves le 2026-09-20). La pastille dit la
     provenance, et elle ne touche a la mise en page de personne. */
  /* ---- L'onglet du texte reconnu ---- */
  .doc-vers button.ia { border-left:3px solid var(--ia-l); }
  .doc-vers button.ia.on { border-left-color:var(--ia); }
  .txt-scene { padding:14px 16px 18px; }
  .txt-tete { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
  .txt-tete b { display:block; margin-top:4px; }
  .txt-tete .muted { display:block; }
  .txt-gestes { display:flex; gap:8px; flex:none; }
  /* Ce que la lecture rend, c'est une table : une ligne par bloc, sa page, son rang, son
     texte, sa boite. Neuf cartes en grille prenaient trois fois la hauteur pour dire la
     meme chose, et on ne pouvait plus comparer deux boites d'un coup d'oeil. */
  .txt-blocs { display:block; overflow-x:auto; }
  .txt-tbl { width:100%; font-size:13px; }
  .txt-tbl th { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-family:var(--mono); }
  .txt-tbl th, .txt-tbl td { padding:5px 8px; border-bottom:1px solid var(--line-soft); vertical-align:baseline; }
  .txt-tbl tbody tr:last-child td { border-bottom:0; }
  .txt-tbl td.num code { font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); }
  .txt-tbl .txt-corr-l td { border-bottom:0; padding-top:0; }
  /* `display:grid` gagne sur l'attribut hidden : il faut le dire. */
  .txt-blocs[hidden] { display:none; }
  .txt-bloc { cursor:pointer; }
  .txt-bloc:hover td { background:var(--ia-w); }
  .txt-bloc.on td { background:var(--ia-w); }
  .txt-bloc.on td:first-child { box-shadow:inset 3px 0 0 var(--ia); }
  .txt-bloc.corrige td:first-child { box-shadow:inset 3px 0 0 var(--md); }
  .txt-lab { font-size:12px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
  .txt-main { text-transform:none; letter-spacing:0; font-weight:600; color:var(--ia); background:var(--ia-w); border-radius:999px; padding:1px 7px; }
  .txt-val { outline:none; border-radius:5px; min-width:150px; }
  .txt-tbl th.num, .txt-tbl td.num { text-align:right; white-space:nowrap; }
  /* Une ligne qui porte un champ de la fiche se detache du reste de la lecture : c'est
     celle qu'on corrige et qu'on reprend. Les autres se lisent, se selectionnent, et
     disent que la piece a ete lue entierement. */
  .txt-tbl td.txt-val.brut { color:var(--ink-soft); }
  .txt-tbl tr.txt-bloc:not(.champ) td.txt-lab { color:var(--muted); }
  .txt-tbl tr.champ td.txt-val { font-weight:600; }
  .txt-val:focus { background:var(--primary-weak); }
  .txt-pied { font-size:11px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
  .txt-pied code { font-family:var(--mono); font-size:10.5px; }
  .txt-corr { color:var(--md); font-weight:600; }
  .txt-md { white-space:pre-wrap; font-family:var(--mono); font-size:12px; line-height:1.55; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:0; }
  /* La provenance d'une table : la pastille et une phrase, au-dessus des lignes. */
  .compo-tete { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; }
  .compo-tete .ic { flex:none; width:40px; height:40px; border-radius:11px; background:var(--primary-weak);
    color:var(--primary); display:flex; align-items:center; justify-content:center; }
  .compo-tete .ic svg { width:21px; height:21px; }
  .compo-tete b { font-size:15px; display:block; }
  .compo-tete .q { font-size:12.5px; color:var(--muted); }
  /* Le metier sous la marque : une marque seule n'apprend rien a qui ouvre l'ecran
     pour la premiere fois, et le metier est ce qu'on cherche quand on choisit une brique. */
  .compo-tete .met { display:block; font-size:11px; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase; color:var(--primary); margin:1px 0 2px; }
  .compo-carte.visee { box-shadow:0 0 0 2px var(--primary); }
  .compo-quoi { margin:0; padding-left:17px; font-size:13px; line-height:1.6; color:var(--ink-soft); }
  .compo-quoi li { margin-bottom:3px; }
  .ind { display:grid; grid-template-columns:14px 1fr auto; gap:10px 12px; align-items:start; padding:10px 0; border-bottom:1px solid var(--line-soft); } .ind:last-child{border-bottom:0;}
  .ind .dot { width:9px; height:9px; border-radius:50%; margin-top:6px; } .ind.hi .dot{background:var(--hi);} .ind.md .dot{background:var(--md);} .ind.lo .dot{background:var(--lo);}
  .ind b { display:block; font-size:13.5px; } .ind .q { color:var(--ink-soft); font-size:12.5px; }
  .btn { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; padding:6px 12px; cursor:pointer; font-size:12.5px; white-space:nowrap; }
  .btn:hover { border-color:var(--primary); color:var(--primary); } .btn.primary { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; }
  .btn.primary:hover { background:#1640bb; color:#fff; } .btn:disabled { opacity:.5; cursor:default; } .btn.ico { width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
  .btn.on { border-color:var(--primary); color:var(--primary); background:var(--primary-weak); }
  /* alertes (règles et recoupements) */
  /* Même règle pour un contrôle : une teinte et un liseré, plus de cadre. Dans une
     carte ou un panneau qui en porte cinq, cinq cadres faisaient une grille de traits. */
  .chk { border-left:3px solid; border-radius:4px; padding:6px 10px; margin-bottom:3px; font-size:12.5px; line-height:1.45; display:flex; justify-content:space-between; gap:10px; align-items:baseline; cursor:pointer; }
  .chk.error { background:#fef2f2; border-color:var(--hi); color:#991b1b; } .chk.warn { background:#fff8e6; border-color:var(--md); color:#92400e; } .chk.ok { background:#ecfdf5; border-color:var(--lo); color:#065f46; cursor:default; }
  .panel.alertes .chk { background:transparent; border-radius:0; } .panel.alertes .chk + .chk { border-top:1px solid rgba(0,0,0,.07); }
  .card.visee { box-shadow:0 0 0 2px var(--primary), 0 6px 20px rgba(20,30,50,.08); }
  .chk .vers { margin:0; padding:0; border:0; background:none; font:inherit; font-size:11px; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; flex:none; } .chk:hover.error, .chk:hover.warn { filter:brightness(.97); }
  .chk .refs { display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; } .chk .ref { font-size:11px; border:1px solid currentColor; border-radius:6px; padding:0 7px; opacity:.85; cursor:pointer; background:rgba(255,255,255,.6); } .chk .ref:hover { opacity:1; background:#fff; }
  details.passes summary { cursor:pointer; font-size:12px; color:var(--muted); list-style:none; margin-top:6px; } details.passes summary::-webkit-details-marker { display:none; }
  details.passes summary::before { content:"+ "; } details.passes[open] summary::before { content:"− "; } details.passes summary:hover { color:var(--primary); } details.passes .chk { margin-top:6px; }
  .concl { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; }
  .concl .score { text-align:center; } .concl .score .v { font-size:34px; font-weight:800; line-height:1; } .concl .score .l { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
  .concl .score.hi .v{color:var(--hi);} .concl .score.md .v{color:var(--md);} .concl .score.lo .v{color:var(--lo);}
  .concl .synth { font-size:14px; } .concl .synth .cmpt { color:var(--muted); font-size:12.5px; margin-top:4px; }
  .decision { display:flex; flex-direction:column; gap:6px; align-items:flex-end; } .decision .dec { display:flex; gap:10px; } .decision label { font-size:12.5px; display:flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap; } .decision label input{margin:0;}
  .decision .etat { font-size:11.5px; color:var(--muted); } .decision .etat.ok { color:var(--lo); }
  /* Le panneau de décision : le geste en trois tuiles, puis ce qu'il y a à demander. */
  .concl.deux { grid-template-columns:auto 1fr; }
  .dpanel h2 .etat { font-size:12px; font-weight:500; color:var(--muted); } .dpanel h2 .etat.ok { color:var(--lo); }
  .tuiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .tuile { position:relative; display:block; border:1.5px solid var(--line); border-radius:var(--radius); padding:11px 13px 12px; cursor:pointer; background:var(--surface); }
  .tuile:hover { border-color:var(--primary); }
  .tuile input { position:absolute; opacity:0; pointer-events:none; }
  .tuile b { display:block; font-size:14px; } .tuile span { display:block; font-size:12px; color:var(--muted); margin-top:2px; line-height:1.45; }
  .tuile i { position:absolute; top:10px; right:11px; font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--primary); }
  .tuile:has(input:checked) { border-color:var(--primary); background:var(--primary-weak); box-shadow:0 0 0 3px var(--primary-weak); }
  .tuile:has(input:focus-visible) { outline:2px solid var(--primary); outline-offset:2px; }
  .dm-tete { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:16px 0 9px; font-size:13.5px; font-weight:700; }
  .dm-tete span { font-size:12px; font-weight:500; color:var(--muted); }
  .dm { display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr); gap:12px; align-items:start; }
  .dm-liste { display:flex; flex-direction:column; gap:7px; }
  .dm-it { text-align:left; font:inherit; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:9px 11px; cursor:pointer; }
  .dm-it:hover { border-color:var(--primary); } .dm-it.on { border-color:var(--primary); background:var(--primary-weak); }
  .dm-it b { display:block; font-size:13px; margin-top:4px; } .dm-it small { display:block; font-size:11.5px; color:var(--muted); margin-top:1px; }
  .dm-ty { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; border-radius:999px; padding:1px 8px; }
  .dm-ty.origine { background:var(--primary-weak); color:var(--primary); } .dm-ty.autre { background:var(--md-w); color:var(--md); }
  .dm-ty.explication { background:var(--lo-w); color:var(--lo); } .dm-ty.interne { background:var(--surface-2); color:var(--ink-soft); }
  .dm-ty.groupe { background:var(--ink-soft); color:#fff; }
  .dm-detail .msg { margin:0; } .dm-detail .msg .mh { font-size:14px; } .dm-detail .msg .mou, .dm-detail .msg .mch { font-size:12.5px; }
  .dm-vide { font-size:13px; color:var(--muted); padding:4px 0 2px; }
  .dpied { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; margin-top:14px; padding-top:13px; border-top:1px dashed var(--line); }
  .dpied textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:7px 9px; font:inherit; font-size:13px; resize:vertical; }
  .dpied label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
  .dm-detail { min-width:0; } .dm-detail .msg .mh { flex-wrap:wrap; } .dm-detail .msg .mh span { white-space:normal; }
  @media(max-width:1000px){ .tuiles { grid-template-columns:1fr; } .dm { grid-template-columns:minmax(0,1fr); } .dpied { grid-template-columns:minmax(0,1fr); } }
  @media(max-width:1000px){ .concl { grid-template-columns:auto 1fr; } .decision { grid-column:1/3; align-items:flex-start; } }

  /* ---- atelier de relecture d'une pièce : la pièce, et son analyse ----
     Deux colonnes, pas trois. La liste des pièces du dossier tenait ici, à gauche ;
     elle disait la même chose que les onglets du dossier, juste à côté. */
  .shell { display:grid; grid-template-columns:1fr 8px var(--s-w,400px); height:100%; } .shell > * { min-height:0; }
  .rz { cursor:col-resize; position:relative; } .rz::before { content:""; position:absolute; left:4px; top:0; bottom:0; width:1px; background:var(--line); } .rz { background:var(--surface); } .rz:hover::before { background:var(--primary); }
  .rz[title]:hover::after { content:attr(title); position:absolute; top:50%; left:10px; transform:translateY(-50%); background:var(--ink); color:#fff; font-size:11px; padding:3px 8px; border-radius:6px; white-space:nowrap; z-index:5; }
  .doc { display:flex; flex-direction:column; min-width:0; background:var(--surface); overflow:hidden; position:relative; }
  .doc-head { display:flex; align-items:center; gap:8px; padding:8px 8px 8px 12px; background:var(--surface); border-bottom:1px solid var(--line); }
  .doc-head .btn { border-color:transparent; background:transparent; color:var(--ink-soft); } .doc-head .btn:hover:not(:disabled) { background:var(--surface-2); color:var(--primary); }
  .doc-head .sep { width:1px; height:18px; background:var(--line); flex:none; margin:0 2px; } .doc-head .zoom { min-width:40px; text-align:center; font-size:12px; color:var(--muted); }
  .doc-head b { font-size:14px; white-space:nowrap; } .doc-head .type { border:1px solid #f0d2d2; background:var(--primary-weak); color:var(--primary); border-radius:999px; padding:1px 9px; font-size:11.5px; white-space:nowrap; } .doc-head .type[data-go] { cursor:pointer; } .doc-head .type[data-go]:hover { border-color:var(--primary); }
  .doc-head .desc { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; } .doc-head .pos { max-width:260px; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:12.5px; white-space:nowrap; }
  .doc-tools { display:flex; align-items:center; gap:6px; padding:6px 14px; background:var(--surface); border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); }
  .doc-tools .zoom { min-width:44px; text-align:center; } .doc-tools .hint { margin-left:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .doc-body { flex:1; min-height:0; overflow:auto; padding:10px 8px 14px 12px; }
  /* La pièce sur un fond gris, comme dans un lecteur : juste assez de gris pour que la
     page blanche se détache, pas une marge qui mange la colonne. */
  .doc-scene { background:#e3e6ec; border-radius:8px; padding:10px; overflow:auto; }
  .doc-wrap { position:relative; margin:0 auto; box-shadow:0 1px 4px rgba(20,38,59,.18); background:#fff; }
  .doc-wrap .doc-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .doc-wrap #zones { position:absolute; inset:0; z-index:3; pointer-events:none; }
  .textLayer { position:absolute; inset:0; z-index:2; overflow:hidden; line-height:1; text-size-adjust:none; forced-color-adjust:none; transform-origin:0 0; }
  .textLayer span, .textLayer br { color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%; }
  .textLayer ::selection { background:rgba(27,75,216,.28); } .textLayer br::selection { background:transparent; }
  .doc-wrap.cadre { cursor:crosshair; }
  /* En mode correction, toutes les zones de texte que la lecture a reconnues se voient : on
     sait tout de suite ce qui est cliquable, et ce que la pièce n'a pas donné en texte. */
  .doc-wrap.cadre .textLayer span.mot { cursor:pointer; border-radius:2px; outline:1px dashed rgba(27,75,216,.38); background:rgba(27,75,216,.06); }
  .doc-wrap.cadre .textLayer span.mot:hover { background:rgba(27,75,216,.18); outline:1px solid var(--primary); }
  .doc-wrap.cadre .textLayer span.pris, .doc-wrap.cadre .textLayer span.mot.pris:hover { background:rgba(27,75,216,.34); outline:2px solid var(--primary); box-shadow:0 0 0 3px rgba(27,75,216,.16); }
  /* Une piece sans calque de texte (un scan, une image) n'a rien a cliquer dans le
     calque. Ce sont alors les boites rendues par la lecture qui se montrent, toutes,
     chacune autour de son texte : on choisit la bonne au lieu de tracer un cadre. */
  .doc-wrap #choix { position:absolute; inset:0; z-index:3; display:none; }
  .doc-wrap.cadre #choix { display:block; }
  .doc-wrap #choix .zc { position:absolute; border-radius:2px; cursor:pointer; outline:1px dashed rgba(27,75,216,.38); background:rgba(27,75,216,.06); }
  .doc-wrap #choix .zc:hover { background:rgba(27,75,216,.18); outline:1px solid var(--primary); }
  /* L'etiquette flotte au-dessus de sa boite, donc par-dessus la boite d'a cote : sans
     cela elle attrape le clic qui visait la ligne du dessus. */
  .doc-wrap #choix .zc .lab { position:absolute; left:-1px; top:-15px; font-size:9.5px; line-height:1.6; font-weight:700; color:#fff;
    background:var(--primary); border-radius:3px 3px 0 0; padding:0 5px; white-space:nowrap; opacity:0; pointer-events:none; }
  .doc-wrap #choix .zc.pris { background:rgba(27,75,216,.34); outline:2px solid var(--primary); box-shadow:0 0 0 3px rgba(27,75,216,.16); }
  .doc-wrap #choix .zc:hover .lab { opacity:1; }
  .doc-wrap .trace { position:absolute; z-index:4; border:2px dashed var(--primary); background:rgba(27,75,216,.10); border-radius:3px; pointer-events:none; }
  .doc-etat { display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; }
  .doc-etat:has(.arme) { position:sticky; bottom:10px; z-index:6; }
  .doc-etat .puce.arme { display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:6px 14px; box-shadow:0 6px 18px rgba(15,23,42,.22); }
  .doc-etat .puce.arme button, .doc-etat .puce.arme .pris { white-space:nowrap; }
  .doc-etat .puce { font-size:11px; font-weight:600; border-radius:999px; padding:2px 9px; background:var(--surface-2); color:var(--ink-soft); }
  .doc-etat .puce.arme { background:var(--primary); color:#fff; } .doc-etat .puce.arme button { border:0; background:none; color:#fff; font:inherit; cursor:pointer; text-decoration:underline; padding:0 0 0 6px; }
  .doc-etat .puce.arme .pris { font-family:var(--mono); font-weight:500; background:rgba(255,255,255,.18); border-radius:4px; padding:0 5px; margin-left:6px; }
  .doc-hint { margin:8px 0 0; text-align:center; font-size:11.5px; color:var(--muted); }
  .doc { container-type:inline-size; }
  /* Les proprietes du fichier ne sont pas une donnee du dossier : c'est une lecture,
     rendue par AI Scan comme le texte de la piece. Meme cadre que les autres widgets. */
  .doc-meta { margin:14px 6px 0; border:1px solid var(--ia-l); border-radius:12px; background:var(--surface);
    padding:12px 13px 13px; box-shadow:0 1px 2px rgba(106,63,181,.07), 0 8px 20px rgba(106,63,181,.09); }
  .doc-meta h3 { font-size:13px; margin:0 0 9px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; } .doc-meta h3 span { font-size:11.5px; font-weight:500; color:var(--muted); }
  .meta.deux { grid-template-columns:118px minmax(0,1fr) 118px minmax(0,1fr); gap:6px 12px; }
  @container (max-width:600px){ .meta.deux { grid-template-columns:118px minmax(0,1fr); } }
  /* Un lecteur étroit (390 px) : la tête passe à la ligne plutôt que de pousser « Page » et la
     loupe hors du cadre, où il fallait faire défiler le lecteur de côté pour les atteindre. */
  @container (max-width:520px){ .doc-head { flex-wrap:wrap; row-gap:2px; } .doc-head .desc { display:none; } .doc-head .pos { margin-left:auto; } }
  /* Dans un lecteur étroit (une pièce ouverte dans son dossier, sur un portable), les
     onglets de version tiennent sur une ligne : on garde leur nom, la date et le détail
     passent dans l'infobulle. Sur trois lignes, ils prenaient la place du document. */
  /* `.doc .doc-vers` et pas `.doc-vers` : la règle de base est écrite plus bas dans la
     feuille, et à poids égal c'est elle qui gagnait. */
  @container (max-width:760px){ .doc .doc-vers { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; gap:0; padding:0 4px; }
    .doc .doc-vers button { flex:none; white-space:nowrap; padding:7px 7px 5px; font-size:12.5px; } .doc .doc-vers button span { display:none; } } .doc-wrap img { display:block; width:100%; height:auto; }
  .zone { position:absolute; border:2px solid; border-radius:3px; pointer-events:none; animation:zonein .35s ease-out; }
  .zone.hi { border-color:var(--hi); background:rgba(220,38,38,.10); } .zone.fd { border-color:var(--primary); background:rgba(27,75,216,.10); }
  .zone.droite .tag { left:auto; right:-2px; }
  .zone .tag { position:absolute; left:-2px; top:-20px; font-size:10.5px; font-weight:700; color:#fff; padding:1px 7px; border-radius:4px 4px 0 0; white-space:nowrap; } .zone.hi .tag{background:var(--hi);} .zone.fd .tag{background:var(--primary);}
  @keyframes zonein { from{transform:scale(1.06);opacity:0} to{transform:none;opacity:1} }
  .props { position:absolute; bottom:26px; right:26px; width:340px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 34px rgba(20,30,50,.18); padding:14px; z-index:6; animation:zonein .2s ease-out; }
  .props-h { display:flex; align-items:center; gap:8px; margin-bottom:10px; } .props-h b { font-size:13.5px; } .props-h .ico { margin-left:auto; width:24px; height:24px; }
  .meta { display:grid; grid-template-columns:118px 1fr; gap:5px 10px; font-size:12.5px; margin:0; } .meta dt { color:var(--muted); } .meta dd { margin:0; font-family:var(--mono); font-size:12px; } .meta dd.flag { color:var(--hi); }
  .meta dt.allume, .meta dd.allume { background:var(--hi-w); box-shadow:0 0 0 3px var(--hi-w); border-radius:3px; }
  .ana { display:flex; flex-direction:column; min-width:0; background:var(--surface); overflow:hidden; } .ana-body { flex:1; min-height:0; overflow:auto; padding:14px 16px 14px 10px; }
  .panel { padding:0 0 14px; margin-bottom:14px; border-bottom:1px solid var(--line); } .panel:last-child { border-bottom:0; margin-bottom:0; }
  .panel h2 { font-size:14px; margin:0 0 10px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; } .panel h2 .prog { font-size:11.5px; color:var(--muted); font-weight:500; }
  .panel.alertes { border:0; border-radius:var(--radius); padding:12px 14px; background:#fff8e6; } .panel.alertes.dur { background:#fff1f1; }
  details.aide summary { cursor:pointer; font-size:12px; color:var(--muted); list-style:none; margin-bottom:8px; } details.aide summary::-webkit-details-marker{display:none;} details.aide summary::before { content:"? "; }
  details.aide ul { margin:4px 0 10px; padding-left:18px; font-size:12px; color:var(--ink-soft); }
  /* Le type d'une pièce, replié en bas de la colonne : une ligne qui dit le type retenu,
     et qui s'ouvre sur ce que l'indexation a fait, si on veut le revoir. */
  details.panel.replie > summary { cursor:pointer; list-style:none; margin:0; }
  details.panel.replie > summary::-webkit-details-marker { display:none; }
  details.panel.replie > summary::before { content:"+"; width:14px; color:var(--muted); font-weight:500; }
  details.panel.replie[open] > summary::before { content:"−"; }
  details.panel.replie > summary .prog { font-weight:500; }
  details.panel.replie:not([open]) { padding-bottom:12px; }
  details.panel.replie:not([open]) > summary { border-bottom:0; padding-bottom:0; margin-bottom:0; }
  details.panel.replie[open] > summary { margin-bottom:10px; }
  /* La fiche : une ligne par champ, sans boîte. Il y avait trois bordures
     emboîtées (le panneau, la carte du champ, la zone de saisie) et chaque champ
     prenait 90 px de haut pour une valeur d'une ligne. Le panneau garde la sienne ;
     le champ n'a plus qu'un filet dessous et son liseré d'état à gauche ; la saisie
     ne montre son cadre qu'au survol et au focus. */
  .field { display:grid; grid-template-columns:98px minmax(0,1fr) auto; align-items:center; column-gap:6px;
    margin:0 -6px; padding:3px 6px 3px 7px; border-left:3px solid transparent; border-bottom:1px solid var(--line); cursor:pointer; }
  .field:last-child { border-bottom:0; } .field:hover { background:var(--surface-2); }
  .field.active { background:var(--primary-weak); border-left-color:var(--primary); }
  .field.flag { border-left-color:var(--hi); background:#fffafa; } .field.ok { border-left-color:var(--lo); }
  .field .lab { display:contents; } .field .lab .name { order:1; font-size:12px; font-weight:600; color:var(--ink-soft); line-height:1.25; }
  .field .lab .page { display:none; }
  .field { grid-template-columns:98px minmax(0,1fr) auto auto; }
  .field .lab .src { order:3; width:20px; height:20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; color:var(--muted); cursor:pointer; opacity:0; }
  .field:hover .lab .src, .field.active .lab .src, .field.corrige .lab .src { opacity:1; } .field .lab .src:hover { background:var(--surface); color:var(--primary); }
  .field.corrige .lab .src { color:var(--primary); }
  .field .src-note { order:6; grid-column:1 / -1; font-size:11.5px; color:var(--primary); margin:0 0 3px; } .field .src-note button { border:0; background:none; font:inherit; color:var(--muted); cursor:pointer; text-decoration:underline; padding:0 0 0 4px; }
  .field .src-note s { color:var(--muted); font-family:var(--mono); }
  .field .corr { order:7; grid-column:1 / -1; display:none; align-items:center; gap:8px; margin:4px 0 2px; font-size:11.5px; color:var(--muted); }
  .field.active .corr { display:flex; }
  .field .corr button { border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:6px; padding:2px 9px; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; }
  .field .corr button:hover { border-color:var(--primary); color:var(--primary); }
  .field .corr button.on { border-color:var(--primary); background:var(--primary); color:#fff; }
  .field .lab .etat { order:4; width:16px; height:16px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; font-size:9px; color:#fff; cursor:pointer; }
  .field.ok .lab .etat { background:var(--lo); border-color:var(--lo); } .field .lab .etat:hover { border-color:var(--lo); color:var(--lo); }
  .field input { order:2; width:100%; min-width:0; border:1px solid transparent; border-radius:6px; padding:3px 6px; font:inherit; font-size:12.5px; font-family:var(--mono); color:var(--ink); background:transparent; text-overflow:ellipsis; }
  .field:hover input { border-color:var(--line); background:var(--surface); } .field input:focus { outline:none; border-color:var(--primary); background:var(--surface); }
  /* Les valeurs cles d'un type de piece : ce qu'on regarde avant tout le reste.
     Sans cadre, exprès : elles vivent déjà dans le panneau de la fiche, et un
     cadre de plus dans un cadre ferait une grille de traits. */
  .cles { display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 6px; }
  .cles button { flex:1 1 92px; min-width:0; text-align:left; border:0; border-radius:8px; background:var(--surface-2); padding:6px 8px; font:inherit; cursor:pointer; }
  .cles button:hover { background:var(--primary-weak); }
  .cles button.on { background:var(--primary-weak); box-shadow:inset 2px 0 0 var(--primary); }
  .cles b { display:block; font-family:var(--mono); font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cles button.flag b { color:var(--hi); }
  .cles span { font-size:10.5px; color:var(--muted); }
  .fgr-t { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:10px 0 1px; }
  .fgr:first-child .fgr-t { margin-top:2px; }
  .field.flag input { color:var(--hi); } .field .why { order:5; grid-column:1 / -1; display:none; font-size:11.5px; color:var(--hi); margin:1px 0 3px; line-height:1.4; } .field.active .why, .field.flag .why { display:block; }
  /* La barre d'une pièce : où en est la lecture, trois gestes qui agissent tout de
     suite, et ce que le geste choisi a déclenché. */
  /* Les versions d'une pièce */
  .etiq.forme { background:var(--surface-2); color:var(--ink-soft); } .etiq.vorig { background:var(--lo-w); color:var(--lo); font-weight:600; }
  .etiq.vconc { background:var(--lo-w); color:var(--lo); } .etiq.vecart { background:var(--hi-w); color:var(--hi); font-weight:600; }
  .vcmp { width:100%; font-size:12px; margin:2px 0 10px; table-layout:fixed; } .vcmp th:first-child, .vcmp td:first-child { width:34%; } .vcmp td { overflow-wrap:anywhere; vertical-align:top; } .vcmp th, .vcmp td { padding:5px 6px; border-bottom:1px solid var(--line); text-align:left; }
  .vcmp th { font-size:10.5px; } .vcmp td:not(:first-child) { font-family:var(--mono); font-size:11.5px; } .vcmp tr.diff td:not(:first-child) { color:var(--hi); font-weight:600; }
  .vissue { font-size:12.5px; line-height:1.5; border-radius:8px; padding:9px 11px; } .vissue.ok { background:var(--lo-w); color:#14532d; } .vissue.ko { background:var(--hi-w); color:#7f1d1d; }
  .pgestes { flex-direction:column; align-items:stretch; gap:8px; }
  .pg-prog { display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--muted); }
  .pg-prog b { color:var(--ink-soft); font-weight:600; } .pg-bar { flex:1; height:5px; border-radius:3px; background:var(--line); overflow:hidden; } .pg-bar i { display:block; height:100%; background:var(--lo); }
  .pg-btns { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .pg-btns button { font:inherit; font-size:12.5px; font-weight:600; border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:8px; padding:7px 6px; cursor:pointer; line-height:1.2; }
  .pg-btns button:hover { border-color:var(--primary); color:var(--primary); }
  .pg-btns button.on[data-geste=conforme] { background:var(--lo-w); border-color:var(--lo); color:var(--lo); }
  .pg-btns button.on[data-geste=redemander] { background:var(--md-w); border-color:var(--md); color:var(--md); }
  .pg-btns button.on[data-geste=douteuse] { background:var(--hi-w); border-color:var(--hi); color:var(--hi); }
  .pg-suite { font-size:12px; color:var(--ink-soft); line-height:1.45; } .pg-suite a, .pg-suite button { color:var(--primary); cursor:pointer; border:0; background:none; font:inherit; padding:0; }
  .pg-suite button { color:var(--muted); text-decoration:underline; }
  .pgarde { margin-top:14px; } .pgarde .tuiles { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
  .pgarde .tuile { font:inherit; text-align:left; } .pgarde .tuile.on { border-color:var(--primary); background:var(--primary-weak); box-shadow:0 0 0 3px var(--primary-weak); }
  .pgarde .pied { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--muted); } .pgarde .pied a { color:var(--primary); }
  .barre { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 14px; border-top:1px solid var(--line); background:var(--surface); }
  .barre .dec { display:flex; gap:10px; flex:none; } .barre label { font-size:12px; white-space:nowrap; display:flex; align-items:center; gap:4px; cursor:pointer; } .barre label input { margin:0; }
  .barre .fin { margin-left:auto; display:flex; align-items:center; gap:10px; } .barre .etat { font-size:11.5px; color:var(--muted); white-space:nowrap; } .barre .etat.ok { color:var(--lo); }

  @media (max-width:900px) { .moments { grid-template-columns:1fr; } }
  /* ---- réactif : le menu devient une barre du haut sous 1000 px, les grilles une colonne,
     les tables défilent dans leur carte, l'atelier s'empile sous 700 px ---- */
  main { min-height:0; }
  .card { overflow-x:auto; }
  table { min-width:max-content; }
  @media(max-width:1400px){ .g21:not(.deux-cols) { grid-template-columns:1fr; } }   /* en dessous, la table de gauche n'a plus la place de ses colonnes */
  /* Un dossier garde ses deux colonnes bien plus bas : à gauche ce qu'on lit, à droite
     ce qu'on vérifie, et un clic à droite allume l'endroit à gauche. Empilées, on perd
     l'un de vue en regardant l'autre, et c'est tout l'intérêt de l'écran qui s'en va. */
  @media(max-width:1000px){ .deux-cols { grid-template-columns:1fr; } .deux-cols > .poignee { display:none; } }
  /* Fenêtre étroite : le menu reste un rail d'icônes à gauche (règle des 1180 px, plus
     bas). Une règle plus ancienne en faisait ici une barre horizontale ; les deux se
     contredisaient, et toute l'application tenait dans une colonne de 62 px. */
  @media(max-width:1000px){ main > .page { padding:16px; } }
  @media(max-width:700px){
    .g4, .g5, .g2, .g21, .g3 { grid-template-columns:1fr; }
    .app .side .nav a { gap:0; padding:8px 10px; } .app .side .nav a .lb { display:none; }
    .filtres .cherche { margin-left:0; width:100%; }
    .concl { grid-template-columns:1fr; gap:12px; } .concl .score { text-align:left; } .decision { align-items:flex-start; } .decision .dec { flex-wrap:wrap; }
    h1 { font-size:19px; }
    /* l'atelier en pile */
    .shell { display:flex; flex-direction:column; height:auto; }
    .rz { display:none; }
    table td:first-child, table th:first-child { position:sticky; left:0; background:var(--surface); z-index:1; }
    .doc { height:58vh; flex:none; } .doc-tools .hint { display:none; }
    .props { left:12px; right:12px; width:auto; bottom:12px; }
    .ana { border-left:0; border-top:1px solid var(--line); overflow:visible; } .ana-body { overflow:visible; }
    .barre { position:sticky; bottom:0; z-index:5; }
  }
  /* ---- La barre du haut : où l'on est à gauche, qui l'on est à droite ----
     Elle ne défile pas : le fil d'Ariane et le profil sont les deux repères qui
     doivent rester lisibles pendant qu'on descend dans une liste. */
  .topbar { display:grid; grid-template-columns:1fr auto auto; align-items:stretch; background:var(--surface);
    height:var(--barre-h); border-bottom:1px solid var(--line); position:relative; z-index:40; }
  .topbar .ariane { min-width:0; display:flex; align-items:center; gap:8px; padding:0 20px 0 24px; font-size:13px;
    color:var(--muted); white-space:nowrap; overflow:hidden; }
  .topbar .ariane a { cursor:pointer; color:var(--muted); }
  .topbar .ariane a:hover { color:var(--primary); text-decoration:underline; }
  .topbar .ariane .sep { color:#c9c9cc; }
  .topbar .ariane .ici { color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
  /* Le profil est un bloc de la barre, pas une pastille posée dessus : il tient
     toute la hauteur, il a son filet à gauche, et ses angles sont ceux du reste. */
  /* Le profil se lit d'un coup d'oeil aux initiales : le nom et le perimetre sont dans
     le menu, juste en dessous, et dans l'infobulle. Le bouton n'a donc que la largeur de
     sa case, comme celui de l'assistant a l'autre bout. */
  .profil { display:flex; align-items:center; justify-content:center; height:100%; width:52px; flex:none;
    border:0; border-left:1px solid var(--line); border-radius:0; background:none; padding:0; cursor:pointer; font:inherit; color:var(--ink); }
  .profil:hover { background:var(--surface-2); }
  .profil[aria-expanded="true"] { background:var(--surface-2); box-shadow:inset 0 -2px 0 var(--primary); }
  /* Les initiales d'un poste ne sont ni une action ni la marque : elles se posent en
     neutre, comme l'étiquette d'un moment. Le bleu plein en faisait une seconde marque,
     à l'autre bout de la barre que le logo. L'assistant, lui, garde le bleu : il parle. */
  .av { width:32px; height:32px; border-radius:6px; background:var(--surface-2); color:var(--ink-soft);
    border:1px solid var(--line); font-size:11px; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex:none; letter-spacing:.02em; }
  .as-qui .av { background:var(--primary); border-color:var(--primary); color:#fff; }
  .profil-menu { position:absolute; top:var(--barre-h); right:0; width:360px; background:var(--surface); border:1px solid var(--line);
    border-top:0; border-radius:0 0 4px 4px; box-shadow:0 14px 34px rgba(20,20,20,.13); z-index:50;
    /* Douze postes et plus : la liste dépassait le bas de l'écran, sans défiler. Elle
       tient dans la hauteur, défile chez elle, et son titre reste en haut. */
    max-height:calc(100vh - var(--barre-h) - 12px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
  .profil-menu .ttl { position:sticky; top:0; z-index:1; background:var(--surface); }
  .profil-menu .ttl { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
    padding:11px 18px 9px; border-bottom:1px solid var(--line-soft); }
  .profil-menu .opt { display:flex; align-items:center; gap:11px; width:100%; border:0; border-bottom:1px solid var(--line-soft);
    background:none; text-align:left; padding:11px 18px; cursor:pointer; font:inherit; color:var(--ink); }
  .profil-menu .opt:hover { background:var(--surface-2); }
  .profil-menu .opt b { display:block; font-size:13px; }
  .profil-menu .opt .q { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; white-space:normal; }
  .profil-menu .opt.on { background:var(--primary-weak); box-shadow:inset 3px 0 0 var(--primary); }
  .profil-menu .opt.on b { color:var(--primary); }
  .profil-menu .opt .coche { margin-left:auto; color:var(--primary); font-size:13px; }
  /* La direction d'un poste se lit à sa couleur : le menu range les postes sous leur
     direction, et l'initiale du poste en prend la teinte, dans le menu comme dans la
     barre. Une application sans directions (Signal) garde ses postes à plat, en gris. */
  .profil-menu .grp { display:flex; align-items:center; gap:8px; padding:12px 18px 7px; font-size:10.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em; color:var(--dir); background:var(--bg); border-bottom:1px solid var(--line-soft); }
  .profil-menu .grp::before { content:""; width:9px; height:9px; border-radius:2px; background:var(--dir); flex:none; }
  .profil-menu .teinte .av, .profil.teinte .av { background:var(--dir-w); color:var(--dir);
    border-color:color-mix(in srgb, var(--dir) 30%, transparent); }
  /* Les directions se déplient au clic sur leur titre. Fermée, une direction dit son
     nombre de postes ; ouverte, ses équipes et leurs postes. */
  .pm-dir { border-bottom:1px solid var(--line-soft); }
  .pm-dir .grp { width:100%; border:0; background:none; cursor:pointer; font:inherit; font-size:10.5px; font-weight:700;
    text-align:left; padding:12px 18px; border-bottom:0; }
  .pm-dir .grp::before { display:none; }
  .pm-dir .grp:hover { background:var(--surface-2); }
  .pm-chev { display:inline-block; width:12px; font-size:13px; transition:transform .15s ease; color:var(--dir); }
  .pm-dir.ouverte .pm-chev { transform:rotate(90deg); }
  .pm-nom { flex:1; }
  .pm-n { font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--dir);
    background:var(--dir-w); border-radius:10px; padding:0 8px; }
  .pm-corps { padding-bottom:8px; }
  .pm-eq { padding:6px 18px 3px 38px; font-size:11px; font-weight:600; color:var(--muted); }
  .pm-dir .opt { padding:6px 18px 6px 36px; gap:10px; border-bottom:0; border-radius:0; }
  .pm-dir .opt .av { width:28px; height:28px; font-size:10px; }
  .pm-dir .opt b { font-size:13px; font-weight:600; }
  .pm-dir .opt .q { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:0; }
  .pm-dir .opt > span:nth-child(2) { min-width:0; }
  .pm-dir .opt.on { background:var(--dir-w); box-shadow:inset 3px 0 0 var(--dir); }
  .pm-dir .opt.on b, .pm-dir .opt .coche { color:var(--dir); }
  @media(max-width:900px){ .profil-menu { right:0; left:0; width:auto; } }
  /* Fenêtre étroite : le menu se réduit tout seul et la table se resserre, plutôt
     que de pousser trois colonnes hors de l'écran. */
  @media(max-width:1180px){
    .app { grid-template-columns:var(--rail-replie) 1fr; }
    .side .brand-txt, .side .side-toggle, .side .nav a .lb, .side .foot { display:none; }
    .app .nav .nav-gr { color:transparent; } .nav .nav-gr::after { opacity:1; }
    .side .nav a { margin:0 -6px 2px; padding:0 6px; }
    main > .page { padding:22px 18px; }
    table { font-size:12.5px; } th,td { padding:8px 8px; }
  }
  /* ---- Bulle : ce qui explique le moment, replié par défaut ---- */
  .bulle { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); margin-bottom:16px; }
  .bulle > summary { cursor:pointer; padding:10px 14px; font-size:13px; color:var(--ink-soft); font-weight:500; display:flex; align-items:center; gap:9px; list-style:none; }
  .bulle > summary::-webkit-details-marker { display:none; }
  .bulle > summary::before { content:"i"; width:18px; height:18px; border-radius:50%; background:var(--primary-weak); color:var(--primary);
    font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
  .bulle > summary:hover { color:var(--primary); }
  .bulle[open] > summary { border-bottom:1px solid var(--line-soft); }
  .bulle .corps { padding:14px; }
  .bulle .corps .card { margin-bottom:0; }
  .bulle .lig { display:flex; gap:12px; align-items:baseline; padding:5px 0; }
  .bulle .lig + .lig { border-top:1px solid var(--line-soft); }
  .bulle .lig .k { flex:none; width:150px; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
  .bulle .lig .v { display:flex; flex-wrap:wrap; gap:6px; }
  /* ---- Note d'enquête : elle ne sort pas de l'équipe fraude ---- */
  .privee { border:1px solid #f0d9a8; background:#fffaf0; border-radius:var(--radius); padding:14px 16px; margin-bottom:18px; }
  .privee h2 { font-size:15px; margin:0 0 4px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .privee .sceau { font-size:11px; color:#a16207; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
  .privee textarea { width:100%; border:1px solid #f0d9a8; border-radius:8px; padding:7px 9px; font:inherit; font-size:13px; background:#fff; }
  /* ---- Moins de traits ----
     Une carte se détache par son fond et une ombre à peine visible, pas par un
     cadre. Ce qui vit DANS une carte n'a aucun cadre : un fond teinté suffit, et
     deux bordures emboîtées font du désordre sans rien dire de plus. */
  .card, .kpi, .moment, .type, .geste { border-color:transparent; box-shadow:0 0 0 1px rgba(20,38,59,.06), 0 1px 2px rgba(20,38,59,.04); }
  .card .kpi, .card .moment, .card .type, .card .geste, .card .file { border-color:transparent; box-shadow:none; background:var(--bg); }
  .moment:hover, .type:hover, .kpi[data-go]:hover { border-color:transparent; box-shadow:0 0 0 1.5px var(--primary); }
  .card .msg { border-color:transparent; }
  /* ---- Les tables de liste : AG Grid, au gabarit de la démo ----
     Même corps 13 px, mêmes en-têtes 11 px en capitales, un seul filet entre les
     lignes, aucun cadre autour : la carte qui porte la grille fait déjà le bord. */
  .grille { width:100%; } .grille .ag-root-wrapper { border:0; border-radius:0; background:transparent; }
  .grille .ag-header { border-bottom:1px solid var(--line); } .grille .ag-header-cell-text { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
  .grille .ag-header-cell:hover .ag-header-cell-text { color:var(--ink); }
  .grille .ag-row { cursor:pointer; border-bottom:1px solid var(--line); } .grille .ag-row:last-child { border-bottom:0; }
  .grille .ag-cell { display:flex; align-items:center; line-height:1.35; font-variant-numeric:tabular-nums; overflow:hidden; }
  .grille .ag-cell .gc { display:inline-block; vertical-align:middle; flex:0 1 auto; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .grille .ag-cell-wrapper, .grille .ag-cell-value { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .grille .ag-header-cell-filter-button { position:absolute; z-index:2; cursor:pointer; right:4px; top:50%; transform:translateY(-50%); padding:3px; border-radius:6px; background:var(--surface); opacity:0; transition:opacity .12s; color:var(--muted); }
  .grille .ag-header-cell.num .ag-header-cell-filter-button { right:auto; left:4px; } .grille .ag-header-cell:hover .ag-header-cell-filter-button, .grille .ag-header-cell:focus-within .ag-header-cell-filter-button { opacity:1; }
  .grille .ag-header-cell-filtered .ag-header-cell-filter-button { opacity:1; color:var(--primary); } .grille .ag-header-cell-filtered .ag-header-cell-text { color:var(--primary); }
  .grille .ag-header-cell-label { gap:4px; } .grille .ag-sort-indicator-icon { color:var(--primary); }
  .grille .ag-cell .gc:has(> .peer) { overflow:visible; } .grille .peer { width:190px; } .grille .ag-cell .flag { color:var(--hi); font-weight:600; }
  .grille .ag-cell.num { justify-content:flex-end; } .grille .ag-header-cell.num .ag-header-cell-label { flex-direction:row-reverse; }
  .grille .ag-cell.flag { color:var(--hi); font-weight:600; } .grille .ag-cell.chev { color:var(--muted); justify-content:flex-end; padding-left:0; }
  .grille .ag-row.alerte { background:#fffafa; box-shadow:inset 3px 0 0 var(--hi); } .grille .ag-row.souligne { background:#fffdf3; box-shadow:inset 3px 0 0 var(--md); }
  .grille .ag-cell-focus:not(.ag-cell-range-selected):focus-within { border-color:transparent; }
  .grille-pied { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 12px 4px; font-size:12px; color:var(--muted); }
  .grille-pied b { color:var(--ink); } .grille-pied .lien { border:0; background:none; font:inherit; color:var(--primary); cursor:pointer; padding:0; }
  .ag-popup .ag-filter, .ag-popup .ag-menu { font-size:12.5px; } .ag-popup .ag-menu, .ag-popup .ag-popup-child { background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(20,38,59,.14); }
  .grille .ag-row, .grille .ag-header, .grille .ag-root, .grille .ag-body, .grille .ag-center-cols-viewport { background:transparent; }
  /* ---- La ligne des noms de colonnes reste a l'ecran quand on defile ----
     Une table de trente lignes, sans ses en-tetes, ne se lit plus : on ne sait plus
     quelle colonne est le score et laquelle est le nombre d'anomalies. C'est #main
     qui defile, donc rien entre lui et l'en-tete ne doit rogner : ni la carte, ni les
     enveloppes de la grille. Sous 1000 px la carte garde son defilement horizontal,
     qui passe avant : l'en-tete fige y est sacrifie. L'en-tete reste SOUS les panneaux
     de filtre de la grille (.ag-popup), d'ou son z-index bas. */
  @media (min-width:1001px) {
    .card.tbl { overflow:visible; }
    /* Une carte qui ne rogne plus ne fait plus défiler sa table : trop large, elle sortait de
       la carte, et la ligne des noms de colonnes mordait sur la carte voisine. Ici la table
       tient donc dans sa carte, et ce sont les cellules de texte qui passent à la ligne. */
    .card.tbl table { min-width:0; }
    .card.tbl td:first-child, .card.tbl td.nw { white-space:nowrap; }   /* un identifiant ou un nom ne se coupe pas : c'est l'objet qui passe à la ligne */
    .grille .ag-root-wrapper, .grille .ag-root { overflow:visible; }
    .grille .ag-header { position:sticky; top:0; z-index:3; background:var(--surface); }   /* son filet bas existe deja : une ombre ferait un cadre de plus */
    .card.tbl > .grille:first-child .ag-header, .card.tbl > .g-corps:first-child .ag-header { border-radius:var(--radius) var(--radius) 0 0; }
    .card.tbl table thead th { position:sticky; top:0; z-index:2; background:var(--surface); box-shadow:0 1px 0 var(--line); }
  }
  /* la pagination d'une longue liste : discrete, dans le ton du pied de grille */
  .grille .ag-paging-panel { border-top:1px solid var(--line); font-size:12px; color:var(--muted); height:40px; padding:0 8px; gap:14px; }
  .grille .ag-paging-panel .ag-picker-field-wrapper { border-color:var(--line); border-radius:8px; min-height:26px; }
  /* ---- La recherche, dans la barre du haut ----
     Le champ tient entre le fil d'Ariane et le profil. Son panneau s'ouvre dessous :
     à gauche ce qu'on peut ouvrir, à droite l'aperçu de la ligne choisie. */
  /* Le fil d'Ariane garde sa place : quand la colonne de droite est ouverte, c'est
     le champ de recherche qui se resserre, pas le chemin où l'on se trouve. */
  .topbar { grid-template-columns:minmax(150px,1fr) minmax(190px,400px) auto auto; }
  .avec-copi .topbar { grid-template-columns:minmax(200px,1fr) minmax(150px,300px) auto auto; }
  .avec-copi .rech-champ kbd { display:none; }
  .rech { position:relative; display:flex; align-items:center; padding:0 16px 0 0; min-width:0; }
  .rech-champ { display:flex; align-items:center; gap:8px; width:100%; height:36px; padding:0 10px 0 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--muted); cursor:text; }
  .rech-champ:hover { border-color:#b9c5da; } .rech.ouvert .rech-champ, .rech-champ:focus-within { border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3px rgba(41,87,200,.12); }
  .rech-champ svg { flex:none; } .rech-champ input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:13px; color:var(--ink); }
  .rech-champ input::placeholder { color:var(--muted); }
  .rech-champ kbd, .rech-pied kbd { font:600 10.5px/1 var(--mono); color:var(--muted); background:var(--surface); border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; padding:3px 5px; white-space:nowrap; }
  .rech-panneau { position:fixed; top:50px; right:16px; width:min(860px, calc(100vw - 32px)); max-height:calc(100vh - 80px); display:flex; flex-direction:column; overflow:hidden;
    background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px rgba(20,38,59,.22), 0 2px 6px rgba(20,38,59,.08); z-index:40; }
  .rech-panneau[hidden] { display:none; }
  .rech-corps { display:grid; grid-template-columns:minmax(0,1fr) 300px; min-height:0; flex:1; }
  .rech-corps.seul { grid-template-columns:minmax(0,1fr); }
  .rech-liste { overflow:auto; padding:8px 8px 10px; min-height:0; }
  .rech-apercu { overflow:auto; padding:16px; background:var(--bg); border-left:1px solid var(--line-soft); font-size:12.5px; min-height:0; }
  .rech-gr { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; padding:10px 10px 4px; display:flex; justify-content:space-between; gap:8px; }
  .rech-gr .compris { text-transform:none; letter-spacing:0; font-weight:500; }
  .rc { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:7px 10px; border-radius:9px; cursor:pointer; }
  .rc.sel { background:var(--primary-weak); }
  .rc .ic { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:var(--surface-2); color:var(--ink-soft); }
  .rc.t-assure .ic { background:#E6F0FF; color:#1D4FB8; } .rc.t-dossier .ic { background:var(--md-w); color:var(--md); } .rc.t-prestataire .ic { background:#EFE9FB; color:#5B3CB0; }
  .rc.t-compte .ic, .rc.t-banque .ic { background:var(--lo-w); color:var(--lo); } .rc.t-rapport .ic, .rc.t-question .ic, .rc.t-fil .ic { background:var(--primary); color:#fff; } .rc.t-scenario .ic { background:var(--hi-w); color:var(--hi); }
  .rc .tx { min-width:0; } .rc .tx b { display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rc .tx span { display:block; font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rc .ty { font-size:10.5px; color:var(--muted); white-space:nowrap; } .rc.sel .ty { color:var(--primary); }
  .rc mark, .rr mark { background:#FFE9A8; color:inherit; border-radius:3px; padding:0 1px; }
  .rech-ex { display:flex; flex-wrap:wrap; gap:6px; padding:2px 10px 6px; }
  .rech-ex button { display:inline-flex; align-items:center; gap:7px; border:0; background:var(--bg); border-radius:999px; padding:5px 11px 5px 6px; font-size:12px; color:var(--ink-soft); cursor:pointer; }
  .rech-ex button:hover, .rech-ex button.sel { background:var(--primary-weak); color:var(--primary); }
  .rech-ex button i { font-style:normal; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--surface); border-radius:999px; padding:2px 7px; color:var(--muted); }
  .rech-vide { padding:22px 14px; color:var(--muted); font-size:13px; }
  .rech-pied { display:flex; align-items:center; gap:14px; padding:8px 14px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--muted); background:var(--surface); }
  .rech-pied .fin { margin-left:auto; color:var(--primary); cursor:pointer; } .rech-pied .fin:hover { text-decoration:underline; }
  .ap-t { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
  .ap-n { font-size:16px; font-weight:700; margin:2px 0 10px; line-height:1.25; }
  .ap-l { display:grid; grid-template-columns:92px minmax(0,1fr); gap:4px 10px; margin:0 0 12px; } .ap-l dt { color:var(--muted); } .ap-l dd { margin:0; min-width:0; overflow-wrap:anywhere; }
  .ap-p { margin:0 0 10px; line-height:1.5; color:var(--ink-soft); }
  .ap-img { display:block; width:100%; max-height:230px; object-fit:cover; object-position:top; border-radius:6px; box-shadow:0 0 0 1px var(--line); background:#fff; margin-bottom:10px; }
  .ap-pts { list-style:none; padding:0; margin:0 0 10px; display:grid; gap:4px; } .ap-pts li { padding:4px 8px; border-left:3px solid var(--md); background:var(--surface); border-radius:4px; line-height:1.4; }
  .ap-pts li.hi { border-color:var(--hi); } .ap-pts li.lo { border-color:var(--lo); }
  @media (max-width:1100px){ .rech-corps { grid-template-columns:minmax(0,1fr); } .rech-apercu { display:none; } }
  @media (max-width:900px){ .topbar { grid-template-columns:minmax(0,1fr) auto auto; } .rech { padding-right:8px; } .rech-champ { width:40px; padding:0 11px; } .rech-champ input, .rech-champ kbd { display:none; }
    .rech.ouvert { position:static; } .rech.ouvert .rech-champ { position:absolute; left:8px; right:8px; top:9px; width:auto; z-index:41; } .rech.ouvert .rech-champ input { display:block; }
    .rech-panneau { left:8px; right:8px; top:54px; width:auto; } }
  /* ---- La page des résultats, et la page d'un compte ---- */
  .rr { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto; gap:14px; align-items:baseline; padding:8px 4px; border-top:1px solid var(--line-soft); cursor:pointer; font-size:13px; }
  .rr:first-of-type { border-top:0; } .rr:hover { background:var(--bg); } .rr b { font-weight:600; } .rr .s { color:var(--muted); font-size:12.5px; min-width:0; } .rr .chev { color:var(--muted); }
  .facettes { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 16px; font-size:12.5px; color:var(--muted); }
  .facettes .etiq { background:var(--primary-weak); color:var(--primary); font-weight:600; }
  /* ---- L'assistant : une conversation par adresse ---- */
  .assist { display:grid; grid-template-columns:270px minmax(0,1fr); gap:0; height:100%; }
  .as-fils { border-right:1px solid var(--line); background:var(--surface); overflow:auto; padding:16px 10px; }
  .as-fils h3 { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:14px 8px 6px; } .as-fils h3:first-child { margin-top:0; }
  .as-fil { display:block; width:100%; text-align:left; border:0; background:none; border-radius:8px; padding:7px 9px; font-size:12.5px; line-height:1.4; color:var(--ink-soft); cursor:pointer; }
  .as-fil:hover { background:var(--surface-2); } .as-fil.on { background:var(--primary-weak); color:var(--primary); font-weight:600; }
  .as-fil span { display:block; font-size:11px; color:var(--muted); font-weight:400; margin-top:1px; }
  .as-rec-sous { font-size:11.5px; line-height:1.45; color:var(--muted); margin:0 8px 8px; }
  .as-deux { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:14px; }
  .as-deux .btn { padding:7px 8px; text-align:center; }
  .as-rap { border:1px solid var(--ia-l); background:var(--ia-w); border-radius:var(--radius); padding:14px 18px 16px; margin-bottom:18px; }
  .as-rap h1 { font-size:20px; margin:8px 0 6px; }
  .as-rap-cle { margin:0; font-size:14px; line-height:1.55; }
  .as-histo { display:flex; align-items:flex-end; gap:10px; margin-top:14px; }
  .as-barre { display:flex; flex-direction:column; align-items:center; gap:2px; width:46px; }
  .as-barre span { display:block; width:100%; border-radius:3px; background:var(--ia-l); }
  .as-barre.on span { background:var(--ia); }
  .as-barre b { font-size:12px; color:var(--ink); } .as-barre i { font-size:10.5px; font-style:normal; color:var(--muted); }
  .as-histo-lib { font-size:10.5px; line-height:1.3; color:var(--muted); align-self:center; }
  .as-rap-pied { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 4px; }
  .as-rap-pied.off { border-top:1px dashed var(--line); padding-top:12px; margin-top:16px; }
  .as-rap-pied .muted { font-size:12px; }
  .as-rythmes { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
  .as-rythmes label { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:8px; padding:6px 11px; font-size:12.5px; cursor:pointer; background:var(--surface); }
  .as-rythmes label.on { border-color:var(--primary); color:var(--primary); background:var(--primary-weak); }
  #asSuiviChamp { width:100%; max-width:560px; border:1px solid var(--line); border-radius:10px; padding:11px 13px; font:inherit; font-size:14px; background:var(--surface); }
  .as-etat { border:1px solid var(--ia-l); background:var(--ia-w); border-radius:var(--radius); padding:10px 14px; margin-bottom:18px; font-size:13px; }
  .as-etat-tete { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .as-etat-tete .muted { font-size:12px; }
  .as-etat p { margin:6px 0 0; line-height:1.5; }
  .as-etat.off { background:none; border-style:dashed; border-color:var(--line); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .as-etat.off .muted { font-size:12px; }
  .as-suivre { border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:5px 10px; font:inherit; font-size:12.5px; color:var(--primary); cursor:pointer; margin-top:8px; }
  .as-etat.off .as-suivre { margin-top:0; }
  .as-suivre:hover { border-color:var(--primary); }
  .as-nouv { width:100%; margin-bottom:6px; }
  .as-col { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }
  .as-fil-corps { flex:1; overflow:auto; padding:24px 26px 12px; min-height:0; }
  .as-fil-corps > * { max-width:900px; margin-left:auto; margin-right:auto; }
  .as-q { display:flex; justify-content:flex-end; margin-bottom:12px; } .as-q span { background:var(--primary); color:#fff; border-radius:14px 14px 3px 14px; padding:9px 14px; font-size:14px; max-width:80%; }
  .as-r { margin-bottom:26px; }
  /* Le trait entre une visite d'avant et ce qu'on demande maintenant (js/fraude.js, traitPlusTot). */
  .as-plus-tot { display:flex; align-items:center; gap:10px; margin:-8px 0 18px; font-size:11.5px; color:var(--muted); }
  .as-plus-tot::before, .as-plus-tot::after { content:""; flex:1; border-top:1px dashed var(--line); }
  .as-qui { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:8px; } .as-qui .av { width:24px; height:24px; border-radius:7px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; }
  .as-trace { list-style:none; padding:0; margin:0 0 12px; display:grid; gap:3px; font-size:12px; color:var(--ink-soft); }
  .as-trace li { display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px; opacity:0; transform:translateY(3px); transition:opacity .2s, transform .2s; } .as-trace li.vu { opacity:1; transform:none; }
  .as-trace .outil { font-family:var(--mono); font-size:11px; color:var(--muted); padding-top:1px; }
  .as-corps { opacity:0; transition:opacity .3s; } .as-corps.vu { opacity:1; }
  .as-corps .card { margin-bottom:10px; } .as-corps .card p { font-size:14px; line-height:1.65; margin:0 0 10px; } .as-corps .card p:last-child { margin-bottom:0; }
  .as-corps .card h3 { margin:14px 0 6px; } .as-corps .sc-lien { font-size:inherit; font-weight:600; }
  .as-pts { list-style:none; padding:0; margin:0 0 10px; display:grid; gap:4px; } .as-pts li { padding:6px 10px; border-left:3px solid var(--md); background:#fff8e6; border-radius:4px; font-size:13px; line-height:1.5; }
  .as-pts li.hi { border-color:var(--hi); background:#fef2f2; } .as-pts li.lo { border-color:var(--lo); background:#ecfdf5; } .as-pts li.nu { border-color:var(--line); background:var(--bg); }
  .as-chemin { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 10px; background:var(--bg); border-radius:8px; margin-bottom:6px; font-size:13px; }
  .as-chemin .n { background:var(--surface); border-radius:999px; padding:2px 10px; box-shadow:0 0 0 1px var(--line); white-space:nowrap; } .as-chemin .n[data-go] { cursor:pointer; color:var(--primary); font-weight:600; } .as-chemin .n[data-go]:hover { box-shadow:0 0 0 1.5px var(--primary); }
  .as-chemin .par { color:var(--muted); font-size:11.5px; } .as-chemin .fl { color:var(--muted); }
  .as-msg { white-space:pre-wrap; font:12.5px/1.55 var(--mono); background:var(--bg); border-radius:8px; padding:12px 14px; margin:6px 0 10px; }
  .as-lim { font-size:12.5px; color:var(--ink-soft); margin:0 0 10px; padding-left:12px; border-left:2px solid var(--line); } .as-lim b { color:var(--ink); }
  .as-suites { display:flex; flex-wrap:wrap; gap:6px; } .as-suites button { border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:5px 12px; font-size:12.5px; color:var(--primary); cursor:pointer; } .as-suites button:hover { border-color:var(--primary); background:var(--primary-weak); }
  .as-saisie { border-top:1px solid var(--line); background:var(--surface); padding:12px 26px 10px; }
  .as-saisie form { display:flex; gap:8px; max-width:900px; margin:0 auto; } .as-saisie input { flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:10px 14px; font:inherit; font-size:14px; outline:0; } .as-saisie input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(41,87,200,.12); }
  .as-saisie .mention { max-width:900px; margin:7px auto 0; font-size:11px; color:var(--muted); }
  .as-accueil h1 { margin-top:6vh; } .as-cartes { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:18px; }
  .as-carte { text-align:left; border:0; background:var(--surface); border-radius:var(--radius); padding:14px 16px; cursor:pointer; box-shadow:0 0 0 1px rgba(20,38,59,.06), 0 1px 2px rgba(20,38,59,.04); font-size:13.5px; line-height:1.45; color:var(--ink); }
  .as-carte:hover { box-shadow:0 0 0 1.5px var(--primary); } .as-carte span { display:block; font-size:11.5px; color:var(--muted); margin-top:6px; }
  /* ---- L'assistant en colonne, à droite, sur n'importe quel écran ----
     Il prend sa place dans la grille, comme le menu de gauche : il ne recouvre
     rien, la page se réduit d'autant, et on lit les deux en même temps. Sous
     1180 px la place n'y est plus : il passe alors par-dessus, avec un voile,
     plutôt que d'écraser la table qu'on est venu lire. */
  .app.avec-copi { grid-template-columns:var(--side-w,226px) minmax(0,1fr) var(--copi-w,372px); }
  .app.avec-copi.side-replie { grid-template-columns:var(--rail-replie) minmax(0,1fr) var(--copi-w,372px); }
  .copi { grid-column:3; grid-row:1 / 3; background:var(--surface); border-left:1px solid var(--line);
    display:flex; flex-direction:column; min-height:0; min-width:0; position:relative; }
  /* Sa largeur se regle a la souris, comme les colonnes de l'atelier : une reponse
     longue se lit mieux large, une table se lit mieux avec la colonne etroite. */
  .copi-rz { position:absolute; left:-4px; top:0; bottom:0; width:8px; cursor:col-resize; z-index:3; }
  .copi-rz:hover, .copi-rz.on { background:linear-gradient(to right, transparent 3px, var(--primary) 3px, var(--primary) 5px, transparent 5px); }
  /* Fermée, elle disparaît vraiment : posée en fixe sur un écran étroit, elle
     couvrirait la page et avalerait les clics. */
  .copi[hidden], .copi-voile[hidden] { display:none; }
  /* Meme hauteur que la barre du haut, au pixel : les deux filets ne font qu'une
     ligne en travers de l'ecran. */
  .copi-tete { display:flex; align-items:center; gap:9px; height:var(--barre-h); padding:0 10px 0 14px;
    border-bottom:1px solid var(--line); }
  .copi-tete .av { width:27px; height:27px; border-radius:8px; background:var(--primary); color:#fff; flex:none;
    display:flex; align-items:center; justify-content:center; }
  .av svg { width:15px; height:15px; fill:currentColor; }
  .copi-tete .t { flex:1; min-width:0; } .copi-tete b { font-size:13.5px; display:block; line-height:1.3; }
  .copi-tete .ou { display:block; font-size:11.5px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .copi-ic { width:28px; height:28px; border-radius:8px; border:0; background:none; color:var(--muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex:none; }
  .copi-ic:hover { background:var(--surface-2); color:var(--ink); }
  .copi-ic svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .copi-corps { flex:1; overflow:auto; padding:14px; min-height:0; }
  .copi-corps > * { max-width:none; }
  .copi-vide p { font-size:12.5px; color:var(--muted); margin:0 0 14px; line-height:1.6; }
  .copi-h3 { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:16px 0 7px; }
  .copi-corps .copi-h3:first-child { margin-top:0; }
  .copi-pistes { display:grid; gap:6px; }
  .copi-pistes button { text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:10px;
    padding:8px 11px; font-size:12.5px; line-height:1.4; color:var(--ink-soft); cursor:pointer; }
  .copi-pistes button:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-weak); }
  .copi-pied { border-top:1px solid var(--line); padding:10px 12px 11px; }
  .copi-pied form { display:flex; gap:7px; }
  .copi-pied form { align-items:flex-end; }
  .copi-pied textarea { resize:none; overflow-y:auto; max-height:180px; line-height:1.45; display:block; }
  .copi-pied input, .copi-pied textarea { flex:1; min-width:0; border:1px solid var(--line); border-radius:9px; padding:8px 11px; font:inherit; font-size:12.5px; }
  .copi-pied input:focus, .copi-pied textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-weak); }
  .copi-pied .btn { padding:8px 12px; }
  .copi-pied .mention { font-size:10.5px; color:var(--muted); margin:7px 0 0; line-height:1.45; }
  /* Dans 372 px la trace ne tient pas en deux colonnes : le nom de l'outil passe au-dessus. */
  .copi .as-trace li { grid-template-columns:minmax(0,1fr); gap:1px; }
  .copi .as-trace .outil { font-size:10.5px; }
  .copi .as-q span { font-size:12.5px; padding:7px 11px; }
  .copi .as-r { margin-bottom:20px; }
  .copi .as-corps .card { padding:12px 13px; }
  .copi .as-corps .card p, .copi .as-lim { font-size:12.5px; line-height:1.6; }
  .copi .as-msg { font-size:11.5px; padding:10px 11px; }
  .copi .as-suites button { font-size:12px; padding:4px 10px; }
  .copi-voile { display:none; }
  @media (max-width:1180px){
    .app.avec-copi { grid-template-columns:var(--side-w,226px) minmax(0,1fr); }
    .app.avec-copi.side-replie { grid-template-columns:var(--rail-replie) minmax(0,1fr); }
    .copi { position:fixed; top:0; right:0; bottom:0; width:min(var(--copi-w,380px),92vw); z-index:60; box-shadow:-14px 0 34px rgba(20,38,59,.18);
      animation:copiEntre .17s ease; }
    @keyframes copiEntre { from { transform:translateX(14px); opacity:.6; } to { transform:none; opacity:1; } }
    .app.avec-copi .copi-voile { display:block; position:fixed; inset:0; background:rgba(20,38,59,.22); z-index:59; }
  }
  /* Le bouton qui déploie la colonne, au bout de la barre, du côté où elle s'ouvre.
     Même geste que le repli du menu de gauche : il développe, et il s'efface une
     fois la colonne ouverte, parce que c'est elle qui porte alors sa réduction. */
  .copi-btn { display:flex; align-items:center; gap:8px; height:100%; flex:none; padding:0 14px;
    border:0; border-left:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer; font:inherit; }
  .copi-btn:hover { background:var(--primary-weak); color:var(--primary); }
  .copi-btn .copi-mq { width:26px; height:26px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center;
    background:var(--primary); color:#fff; box-shadow:0 1px 3px rgba(27,75,216,.35); }
  .copi-btn:hover .copi-mq { background:var(--ink); box-shadow:0 2px 6px rgba(15,23,42,.28); }
  .copi-btn .copi-mq svg { width:16px; height:16px; fill:currentColor; }
  .copi-btn[hidden] { display:none; }
  .sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  @media (max-width:900px){ .assist { grid-template-columns:1fr; } .as-fils { display:none; } .as-fil-corps { padding:16px; } .as-saisie { padding:10px 16px; } .as-trace li { grid-template-columns:1fr; gap:0; } }
  /* ---- Les versions d'un fichier, en onglets au-dessus de la pièce ----
     Ils n'existent que si le fichier garde plusieurs versions. La version reçue
     d'abord, puis chaque version antérieure, puis la comparaison. */
  /* Les onglets passent a la ligne plutot que de defiler : a 1280 px, « Comparer les
     versions » et « Comparer au modele » sortaient du volet, et c'est l'ecran qui prouve
     la retouche devant la salle. */
  .doc-vers { display:flex; flex-wrap:wrap; align-items:stretch; gap:0 2px; padding:0 8px; background:var(--surface); border-bottom:1px solid var(--line); flex:none; }
  .doc-vers button { border:0; border-bottom:2px solid transparent; background:none; padding:7px 12px 5px; cursor:pointer; color:var(--ink-soft); display:flex; flex-direction:column; align-items:flex-start; line-height:1.3; white-space:nowrap; font-size:12.5px; }
  .doc-vers button span { font-size:10.5px; color:var(--muted); font-family:var(--mono); }
  .doc-vers button:hover { background:var(--surface-2); } .doc-vers button.on { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
  .doc-vers button.anc b { color:var(--hi); } .doc-vers button.on.anc { border-bottom-color:var(--hi); }
  .ver-note { margin:0 0 10px; padding:8px 12px; border-left:3px solid var(--hi); background:var(--hi-w); border-radius:4px; font-size:12.5px; line-height:1.5; color:#7a1f23; }
  .ver-ecarts { list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr); gap:3px 10px; font-size:12px; }
  .ver-ecarts li { display:contents; } .ver-ecarts span { font-family:var(--mono); font-size:11.5px; overflow-wrap:anywhere; } .ver-ecarts i { font-style:normal; opacity:.65; }
  .ver-note.calme { border-color:var(--md); background:var(--md-w); color:#6b4406; } .ver-note .sc-lien { font-size:inherit; font-weight:600; }
  /* Comparer au modele de l'emetteur, ouvrir les versions que le fichier garde : deux
     lectures de plus, donc deux widgets, avec la meme pastille et le meme contrat. */
  .scn-ia { border:1px solid var(--ia-l); border-radius:12px; background:var(--surface); padding:12px 13px 13px;
    box-shadow:0 1px 2px rgba(106,63,181,.07), 0 8px 20px rgba(106,63,181,.09); }
  .scn-ia > h3.wg-tete { font-size:13px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
  .scn-ia > h3.wg-tete > span:last-child { font-size:11.5px; font-weight:500; color:var(--muted); }
  .cmp { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; background:#e3e6ec; border-radius:8px; padding:10px; }
  .cmp figure { margin:0; min-width:0; } .cmp figcaption { font-size:12px; font-weight:600; margin:0 0 6px; display:flex; justify-content:space-between; gap:8px; } .cmp figcaption span { font-weight:400; color:var(--muted); font-family:var(--mono); font-size:11px; }
  .cmp .f { position:relative; background:#fff; box-shadow:0 0 0 1px var(--line); border-radius:3px; cursor:pointer; } .cmp .f img { display:block; width:100%; height:auto; }
  .cmp-t { margin-top:12px; min-width:0; width:100%; table-layout:fixed; } .cmp-t td { white-space:normal; overflow-wrap:anywhere; vertical-align:top; } .cmp-t td, .cmp-t th { padding:6px 8px; } .cmp-t td.v { font-family:var(--mono); font-size:12px; } .cmp-t td.v.hi { color:var(--hi); font-weight:600; }
  .doc-meta h4 { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:12px 0 6px; font-weight:600; display:flex; justify-content:space-between; gap:8px; }
  .doc-meta h4:first-child { margin-top:0; } .doc-meta h4 span { text-transform:none; letter-spacing:0; font-weight:400; }
  .meta dd .sc-lien { font-family:inherit; font-size:inherit; }
  /* ---- Les propriétés du fichier, en tableau : modèle, pièce reçue, verdict ----
     Les deux colonnes de valeurs sont dans le même ordre que la comparaison au modèle,
     juste en dessous : ce qu'on attend d'abord, ce que la pièce porte ensuite. Les
     inverser d'un tableau à l'autre suffisait à faire lire un écart à l'envers. */
  .fprops { width:100%; min-width:0; table-layout:fixed; border-collapse:collapse; font-size:12.5px; }
  .fprops col.c1 { width:132px; } .fprops col.c4 { width:26px; }
  .fprops th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; padding:12px 6px 5px; border:0; background:none; position:static; }
  .fprops th.gr { color:var(--ink-soft); } .fprops tr:first-child th { padding-top:2px; }
  .fprops td { padding:5px 6px; border:0; border-top:1px solid var(--line-soft); vertical-align:top; white-space:normal; overflow-wrap:anywhere; background:none; position:static; }
  .fprops td.l { color:var(--muted); } .fprops td.o { font-family:var(--mono); font-size:12px; } .fprops td.a { color:var(--ink-soft); font-size:12px; } .fprops td.a:empty::after { content:"—"; color:#c3cad6; }
  .fprops td.v { text-align:center; } .fprops .fpt { display:inline-block; width:8px; height:8px; border-radius:50%; background:#d5dbe6; margin-top:5px; } .fprops .fpt.ok { background:var(--lo); } .fprops .fpt.ko { background:var(--hi); }
  .fprops tr.ko td { background:var(--hi-w); } .fprops tr.ko td.o { color:var(--hi); font-weight:600; } .fprops tr.ko td:first-child { box-shadow:inset 3px 0 0 var(--hi); }
  .fprops tr.allume td { background:#ffe3e3; } .fprops .sc-lien { font-family:system-ui,"Segoe UI",sans-serif; font-size:12px; }
  .fprops-bilan { margin:0 0 10px; font-size:12.5px; color:var(--ink-soft); } .fprops-bilan b.ko { color:var(--hi); } .fprops-bilan b.ok { color:var(--lo); }
  /* ---- La comparaison au modèle de l'émetteur ---- */
  .mod-bilan { margin:12px 0 0; font-size:13px; } .mod-bilan b.ko { color:var(--hi); } .mod-bilan b.ok { color:var(--lo); }
  .cmp-t th.gr { padding-top:14px; color:var(--ink-soft); } .cmp-t tr.ko td { background:var(--hi-w); } .cmp-t tr.ko td:first-child { box-shadow:inset 3px 0 0 var(--hi); } .cmp-t tr[data-zone] { cursor:pointer; }
  .cmp-t td.ver { width:84px; font-size:11.5px; white-space:nowrap; } .cmp-t td.ver.ok { color:var(--lo); } .cmp-t td.ver.ko { color:var(--hi); font-weight:600; }
  .cmp .f .zone.pulse { animation:zonein .35s ease-out 2; }
  /* ---- Les catégories d'une table : des pastilles au-dessus, des cases dans le filtre ---- */
  .puces { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:12px 14px 6px; }
  .puces .lab { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; margin-right:4px; }
  .puces .filtre b { font-variant-numeric:tabular-nums; } .puces .filtre i { font-style:normal; color:var(--hi); font-weight:600; margin-left:4px; font-size:11.5px; }
  .puces .raz, .puces .voir { border:0; background:none; font:inherit; font-size:12px; color:var(--primary); cursor:pointer; padding:0 4px; }
  .puces .leg { font-size:11.5px; color:var(--muted); margin-left:6px; } .puces .leg i { font-style:normal; color:var(--hi); }
  .puces .voir { margin-left:auto; } .puces .raz:hover, .puces .voir:hover { text-decoration:underline; }
  .puces .aide { margin-left:auto; font-size:11.5px; color:var(--muted); }
  /* Choisir les colonnes. Un type de pièce porte parfois quinze valeurs : la table
     en montre quelques-unes, et le lecteur ajoute les autres. Le menu ne pose
     qu'un cadre, le sien, et il vit au-dessus de la table sans la pousser. */
  .g-cols { position:relative; display:flex; justify-content:flex-end; padding:10px 14px 0; }
  .cols-menu { position:absolute; right:14px; top:36px; z-index:30; background:var(--surface); border:1px solid var(--line); border-radius:10px;
    box-shadow:0 8px 24px rgba(20,38,59,.14); padding:7px; min-width:216px; max-height:330px; overflow:auto; }
  .cols-menu label { display:flex; align-items:center; gap:8px; padding:4px 7px; border-radius:7px; font-size:12.5px; cursor:pointer; }
  .cols-menu label:hover { background:var(--surface-2); }
  .cols-menu .lien { display:block; width:100%; text-align:left; margin-top:3px; border:0; background:none; font:inherit; font-size:12px; color:var(--primary); cursor:pointer; padding:4px 7px; }
  .classe.bande { border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:10px 15px 11px; margin:0 0 16px; }
  .classe.bande .cl-tete { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .classe.bande .cl-quoi { font-size:13px; }
  .classe.bande .cl-recu { font-size:12px; color:var(--muted); }
  .classe.bande .compos { margin-left:auto; }
  .classe.bande .cl-sur { margin:7px 0 0; }
  .classe.bande .cl-duo { display:inline-flex; align-items:baseline; gap:5px; margin-right:14px; white-space:nowrap; }
  .classe.bande .cl-duo .sc-lien { font-family:var(--mono); font-size:12px; }
  /* Les volets d'un classement. « Pourquoi » et « Changer » parlent du même objet : on
     n'en lit qu'un à la fois. Côte à côte, deux dépliants se poussaient l'un l'autre en
     s'ouvrant, et les boutons d'un volet semblaient appartenir au titre de l'autre. Les
     onglets, eux, ne bougent jamais, et le volet ouvert est encadré sous le sien. */
  .classe .cl-volets { margin-top:11px; border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden; }
  .classe .cl-ongls { display:flex; flex-wrap:wrap; background:var(--bg); }
  .classe .cl-ongl { border:0; border-right:1px solid var(--line); background:none; color:var(--primary); border-radius:0;
    padding:7px 13px; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
  .classe .cl-ongl:last-of-type { border-right:0; }
  .classe .cl-ongl::before { content:"›"; display:inline-block; transition:transform .15s; }
  .classe .cl-ongl:hover { background:var(--primary-weak); }
  .classe .cl-ongl.on { background:var(--surface); box-shadow:inset 0 2px 0 var(--primary); }
  .classe .cl-ongl.on::before { transform:rotate(90deg); }
  .classe .cl-volet { border-top:1px solid var(--line); padding:4px 13px 10px; }
  .classe .cl-volet[hidden] { display:none; }
  .classe .cl-volet .cl-geste { margin:9px 0 3px; }
  .classe .cl-volet .cl-trace li:first-child { border-top:0; }
  .classe .cl-ligne { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 0; }
  .classe .cl-pill { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; line-height:1.2;
    border:1px solid var(--line); border-radius:999px; padding:4px 5px 4px 12px; background:var(--surface); }
  .classe .cl-pill i { font-style:normal; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
    border-radius:999px; padding:2px 7px; background:var(--surface-2); color:var(--ink-soft); cursor:help; }
  .classe .cl-pill.sur { border-color:#bfe3cd; } .classe .cl-pill.sur i { background:#e6f4ea; color:#1e7d4b; }
  .classe .cl-pill.hes { border-color:#f0d9b8; } .classe .cl-pill.hes i { background:#fdf0e3; color:#b45309; }
  .classe .cl-pill.att { border-color:var(--line); color:var(--muted); } .classe .cl-pill.att i { background:var(--surface-2); color:var(--muted); }
  .classe .cl-pill.ok { border-color:var(--line); }
  .classe .cl-pill:not(:has(i)) { padding-right:12px; }
  .classe .cl-etat { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-radius:999px; padding:3px 9px;
    border:1px solid transparent; font-family:inherit; cursor:pointer; }
  .classe .cl-etat:hover { border-color:currentColor; }
  .classe .cl-etat.att { background:#fdf0e3; color:#b45309; } .classe .cl-etat.hes { background:var(--primary-weak); color:var(--primary); }
  .classe .cl-etat.ok { background:var(--surface-2); color:var(--ink-soft); }
  .classe .cl-geste { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 0 2px; font-size:11.5px; color:var(--muted); }
  .classe .cl-geste button { border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:6px; padding:2px 9px; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; }
  .classe .cl-geste button:hover { border-color:var(--primary); color:var(--primary); }
  .classe .cl-sur { font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 6px; }
  .classe .cl-meta { font-size:11.5px; color:var(--muted); line-height:1.6; margin:8px 0 0; }
  .classe .cl-meta .sc-lien { margin-left:8px; } .classe .cl-meta s { opacity:.8; }
  .classe .cl-trace { list-style:none; margin:6px 0 2px; padding:0; font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
  .classe .cl-trace li { padding:6px 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px; }
  .classe .cl-trace .q { font-weight:700; color:var(--ink-soft); }
  .classe .cl-trace .issue { color:var(--muted); margin-left:auto; }
  .classe .cl-trace .d { flex:1 0 100%; color:var(--muted); overflow-wrap:anywhere; }
  .morig { font-size:11px; font-weight:700; cursor:help; }
  .morig.ok { color:var(--lo); } .morig.ko { color:var(--hi); } .morig.orig { color:var(--lo); font-size:9px; vertical-align:2px; }
  .morig.att { color:var(--md, #b45309); font-size:13px; line-height:0; vertical-align:1px; }
  .morig[data-go] { cursor:pointer; }
  .grille-etroit { font-size:11.5px; color:var(--muted); padding:8px 14px 0; }
  .grille .ag-cell .gc .etiq { max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
  .grille .ag-cell-wrap-text .gc .etiq { max-width:none; white-space:normal; }
  .grille .ag-cell-wrap-text .gc { white-space:normal; line-height:1.45; word-break:normal; overflow-wrap:break-word; hyphens:none; }
  .grille .ag-cell-wrap-text { padding-top:6px; padding-bottom:6px; }
  .fcat { padding:8px 4px 6px; min-width:210px; max-height:340px; overflow:auto; font-size:12.5px; }
  .fcat label { display:flex; align-items:center; gap:8px; padding:4px 10px; border-radius:6px; cursor:pointer; white-space:nowrap; }
  .fcat label:hover { background:var(--surface-2); } .fcat label span { flex:1; } .fcat label b { font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; }
  .fcat input { accent-color:var(--primary); margin:0; }
  .fcat .tete { display:flex; justify-content:space-between; gap:8px; padding:0 10px 6px; margin-bottom:4px; border-bottom:1px solid var(--line-soft); }
  .fcat .tete button { border:0; background:none; font:inherit; font-size:12px; color:var(--primary); cursor:pointer; padding:0; }
  /* La provenance d'un champ rempli par le composant : sous la valeur, en petit.
     A cote, elle poussait la colonne hors de la carte. */
  .wg .fiche .ed-ou { display:block; margin-top:2px; font-size:11px; color:var(--muted); }
  /* La tête d'un bloc, partout la même dans Vision : la pastille du composant et son « i »
     d'abord, puis le titre, puis, poussé à droite, ce qui compte (score, confirmés).
     C'est l'ordre des blocs du tri, des appels et du rapport. L'auteur, le 24-09 : « tu
     dois faire homogène pour la position des pastilles ». La règle vaut quel que soit
     l'ordre du gabarit, et check_ecrans la tient (BLOCS). */
  .panel h2.wg-tete, .card h2.wg-tete, h2.wg-tete, .doc-meta > h3.wg-tete, .scn-ia > h3.wg-tete, summary.wg-tete {
    display:flex; justify-content:flex-start; align-items:center; gap:8px; flex-wrap:wrap; }
  .wg-tete > .compos, .wg-rap-tete > .compos, .classe.bande .cl-tete > .compos,
  h2.wg-tete > .compos:not(:last-child), h3.wg-tete > .compos:not(:last-child) { order:-1; margin-left:0; margin-right:0; }
  summary.wg-tete::before { order:-2; }
  details.panel.replie:not([open]) > summary.wg-tete { border-bottom:0; padding-bottom:0; margin-bottom:0; }
  .wg-tete > .prog, .scn-ia > h3.wg-tete > span:last-child, .doc-meta > h3.wg-tete > span:last-child { margin-left:auto; }
  /* Un composant, un bloc : les parties de sa sortie se suivent dedans, sous un
     sous-titre, jamais dans une boîte à part (l'auteur, le 24-09). */
  :is(.panel, .card, .wg) .w-sous { display:flex; align-items:baseline; gap:8px; margin:14px 0 6px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
  :is(.panel, .card, .wg) .w-sous > span { margin-left:auto; }
  :is(.panel, .card, .wg) .w-sous > span:not([class]) { font-size:11.5px; font-weight:500; color:var(--muted); }
  :is(.panel, .card) .wg-tete + .w-sous, :is(.panel, .card) .wg-tete + div > .w-sous:first-child,
  .wg .wg-corps > .w-sous:first-child, .wg .wg-corps > div:first-child > .w-sous:first-child { margin-top:2px; }
  /* Une partie qu'on ouvre à la demande : comment un classement est obtenu. */
  details.meth-volet { margin-top:12px; } details.meth-volet > summary { cursor:pointer; list-style:none; }
  details.meth-volet > summary::-webkit-details-marker { display:none; }
  details.meth-volet > summary::before { content:"+ "; color:var(--muted); } details.meth-volet[open] > summary::before { content:"− "; }
  details.meth-volet[open] > summary { margin-bottom:8px; }
  details.w-props { margin-top:12px; } details.w-props > summary.w-sous { cursor:pointer; list-style:none; margin:0 0 6px; }
  details.w-props > summary.w-sous::-webkit-details-marker { display:none; }
  details.w-props > summary.w-sous::before { content:"+ "; color:var(--muted); } details.w-props[open] > summary.w-sous::before { content:"− "; }
  details.w-props > summary.w-sous:hover { color:var(--primary); }
  /* Le score de la pièce résume : un signal y tient sur sa ligne, son détail s'ouvre au clic. */
  .synth-piece .signal { cursor:pointer; margin-bottom:6px; } .synth-piece .signal:last-child { margin-bottom:2px; }
  .synth-piece .signal:not(.ouvert) .d, .synth-piece .signal:not(.ouvert) .raison, .synth-piece .signal:not(.ouvert) .o { display:none; }
  .synth-piece .signal:hover .t { color:var(--primary); }