/* Marqueurs produit (sur noir), intégrés depuis exploration-immersive/marqueurs.css + tableau.css.
   Toutes les règles sont limitées à #marqueurs ; les variables aussi. */
/* Marqueurs produit sur noir : une rangée par marqueur, capture de l'application d'un côté, texte court de l'autre.
   Pas de carte : la capture est posée sur le noir, un filet fin et une lueur neutre la détachent.
   Elle déborde vers le bord de l'écran et s'y estompe. L'or reste réservé aux sources, dans les captures. */



#marqueurs{--noir:#0a0a0a;--blanc:#fafafa;--texte:#ededed;--texte-2:#a1a1a1;--texte-3:#8a8a8a;--filet:#ffffff17;--ease:cubic-bezier(.16,1,.3,1)}
#marqueurs,#marqueurs *{box-sizing:border-box}
#marqueurs{margin:0;background:var(--noir);color:var(--texte);font:16px/1.55 Inter,system-ui,sans-serif;overflow-x:clip}
#marqueurs h2,#marqueurs h3,#marqueurs p,#marqueurs figure{margin:0}

/* Pleine largeur pour que le noir couvre l'écran ; le contenu reste dans 1280 px. */
#marqueurs.marqueurs{padding:18vh max(5vw,calc((100% - 1280px) / 2 + 5vw)) 14vh}
#marqueurs.marqueurs h2{max-width:24ch;font-size:var(--titre-section,clamp(30px,3.2vw,48px));font-weight:600;line-height:1.08;letter-spacing:-.035em}
#marqueurs.marqueurs h2 span{color:#8a8a8a}

/* Une rangée : texte à gauche, capture à droite ; une rangée sur deux, l'inverse. */
#marqueurs .rangee{display:grid;grid-template-columns:4fr 8fr;gap:clamp(40px,6vw,96px);align-items:center;margin-top:clamp(96px,16vh,180px)}
#marqueurs .rangee:nth-of-type(even){grid-template-columns:8fr 4fr}
#marqueurs .rangee:nth-of-type(even) .texte{order:2}

#marqueurs .texte{max-width:34ch}
#marqueurs .texte h3{font-size:clamp(24px,2.2vw,32px);font-weight:600;line-height:1.15;letter-spacing:-.03em}
#marqueurs .texte p:last-child{margin-top:14px;color:var(--texte-2);line-height:1.6}
#marqueurs .tableau figcaption{margin-top:10px;color:var(--texte-3);font-size:12px;line-height:1.5}

/* La capture : filet, coins arrondis, lueur au-dessus. Elle déborde du côté du bord de l'écran. */
#marqueurs .capture{position:relative;margin-right:-8vw}
#marqueurs .rangee:nth-of-type(even) .capture{margin-right:0;margin-left:-8vw}
#marqueurs .capture::before{content:"";position:absolute;inset:-12% 10% auto;height:60%;background:radial-gradient(closest-side,#ffffff12,transparent);filter:blur(20px);pointer-events:none}
#marqueurs .fenetre{position:relative;overflow:hidden;border:1px solid var(--filet);border-radius:14px;background:#111;box-shadow:0 1px 0 #ffffff14 inset,0 40px 80px -30px #000;
  -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
#marqueurs .rangee:nth-of-type(even) .fenetre{-webkit-mask-image:linear-gradient(270deg,#000 82%,transparent);mask-image:linear-gradient(270deg,#000 82%,transparent)}
#marqueurs .fenetre img{display:block;width:100%;height:auto}
/* Capture dont le bord compte (panneau de droite) : pas de fondu vers l'écran. */
#marqueurs .rangee .fenetre.entiere{-webkit-mask-image:none;mask-image:none}

/* Tant que la capture n'est pas fournie : un emplacement au bon format, nommé. */
#marqueurs .capture.manque .fenetre{aspect-ratio:16/10;display:grid;place-items:center;background:#0f0f0f}
#marqueurs .capture.manque img{display:none}
#marqueurs .capture.manque .fenetre::after{content:"Capture à venir : " attr(data-nom);font:13px/1.4 "IBM Plex Mono",monospace;color:var(--texte-3)}

/* Parsing : une fenêtre de lecture. À gauche, une page étiquetée par le parsing, en petit : on comprend, on ne lit pas.
   Un trait de lecture la descend et révèle les étiquettes ; à droite, les passages paraissent à mesure. */
#marqueurs .capture.parsing{margin-right:0}
#marqueurs .lecture-fenetre{position:relative;border:1px solid var(--filet);border-radius:14px;background:#111;overflow:hidden;box-shadow:0 1px 0 #ffffff14 inset,0 40px 80px -30px #000}
#marqueurs .lecture-barre{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--filet);font:12px/1.4 "IBM Plex Mono",monospace;color:var(--texte-2)}
#marqueurs .lecture-barre span:last-child{color:var(--texte-3)}
#marqueurs .lecture-corps{display:grid;grid-template-columns:1.1fr 1fr}
#marqueurs .lecture-feuille{display:flex;align-items:center;justify-content:center;padding:26px 22px;background:#161616;border-right:1px solid var(--filet)}
#marqueurs .guide-page{position:relative;width:88%;border-radius:4px;overflow:hidden;background:#fff}
#marqueurs .guide-page img{display:block;width:100%;height:auto}
/* Sous le trait : la page lue, étiquettes comprises. Au-dessus : la même page, pâle, pas encore lue. */
#marqueurs .guide-fond{filter:grayscale(1);opacity:.35}
#marqueurs .guide-lu{position:absolute;inset:0;clip-path:inset(0 0 calc(100% - var(--lu,0) * 100%) 0)}
#marqueurs .guide-trait{position:absolute;left:0;right:0;top:calc(var(--lu,0) * 100%);height:2px;margin-top:-1px;background:#e2b45c;opacity:var(--trait,0);transition:opacity .4s}

#marqueurs .passages{margin:0;padding:12px;list-style:none;display:flex;flex-direction:column;gap:6px}
#marqueurs .passage{opacity:0;transform:translateY(6px);transition:opacity .45s,transform .6s var(--ease)}
#marqueurs .passage.on{opacity:1;transform:none}
#marqueurs .passage-tete{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;background:#1c1c1c;font-size:12.5px;font-weight:500}
#marqueurs .passage-tete::after{content:"";width:6px;height:6px;margin:-3px 2px 0 0;border:solid var(--texte-3);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
#marqueurs .passage ul{margin:0;padding:0;list-style:none}
#marqueurs .element{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:center;padding:4px 10px;border-radius:6px}
#marqueurs .element i{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#ffffff0f;font:600 11px/1 Inter,sans-serif;font-style:normal;color:var(--texte-2)}
#marqueurs .element.b-titre i{color:#e2b45c}
#marqueurs .element b{display:block;overflow:hidden;font-size:13px;font-weight:450;line-height:1.35;white-space:nowrap;text-overflow:ellipsis;color:var(--texte-2)}
#marqueurs .element.b-titre b{font-weight:550;color:var(--texte)}

/* Recherche : un petit workflow façon n8n sur une toile pointillée. Les nœuds sont placés par la grille ;
   marqueurs.js trace les liens entre leurs poignées et fait circuler la question (classes actif / fait). */
#marqueurs .rangee .capture.flux{margin-left:0}
#marqueurs .flux-toile{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"q s f r" "q m f r";gap:112px 14px;align-items:center;
  padding:36px 22px 112px;border:1px solid var(--filet);border-radius:14px;background:radial-gradient(#ffffff14 1px,transparent 1.2px) 0 0/18px 18px,#0f0f0f}
#marqueurs .flux-liens{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#marqueurs .flux-liens path{fill:none;stroke:#ffffff29;stroke-width:1.5;transition:stroke .4s}
#marqueurs .flux-liens path.actif{stroke:#ededed;stroke-dasharray:5 6;animation:circule .5s linear infinite}
#marqueurs .flux-liens path.fait{stroke:#ffffff80}
@keyframes circule{to{stroke-dashoffset:-11}}
#marqueurs .noeud{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
#marqueurs .noeud-boite{position:relative;display:grid;place-items:center;width:58px;height:58px;border:1.5px solid #ffffff2e;border-radius:12px;background:#1a1a1a;transition:border-color .4s,box-shadow .4s}
#marqueurs .declencheur .noeud-boite{border-radius:29px 12px 12px 29px}
#marqueurs .noeud-boite svg{width:24px;height:24px;fill:none;stroke:var(--texte-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
#marqueurs .noeud.actif .noeud-boite{border-color:#ededed;box-shadow:0 0 0 4px #ffffff12}
#marqueurs .noeud.actif .noeud-boite svg,#marqueurs .noeud.fait .noeud-boite svg{stroke:var(--texte)}
#marqueurs .noeud.fait .noeud-boite{border-color:#ffffff80}
/* La légende pend sous la boîte sans compter dans la grille : les boîtes d'une même ligne restent alignées. */
#marqueurs .noeud-legende{position:absolute;top:calc(100% + 10px);left:50%;width:150px;margin-left:-75px;display:flex;flex-direction:column;align-items:center}
#marqueurs .noeud-nom{font-size:13px;font-weight:550}
#marqueurs .noeud-detail{margin-top:3px;font-size:12px;line-height:1.4;color:var(--texte-3)}
#marqueurs .noeud-trouve,#marqueurs .noeud-sortie{opacity:0;transform:translateY(4px);transition:opacity .45s,transform .6s var(--ease)}
#marqueurs .noeud.fait .noeud-trouve,#marqueurs .noeud.fait .noeud-sortie{opacity:1;transform:none}
#marqueurs .noeud-trouve{margin-top:8px;padding:3px 9px;white-space:nowrap;border:1px solid var(--filet);border-radius:99px;background:#161616;font-size:12px;color:var(--texte-2)}
#marqueurs .noeud[data-noeud="retenu"] .noeud-legende{width:176px;margin-left:-88px}
#marqueurs .noeud-sortie{align-self:stretch;margin-top:10px;padding:10px 12px;border:1px solid var(--filet);border-radius:10px;background:#161616;text-align:left;font-size:12px;line-height:1.45}
#marqueurs .sortie-tete{color:var(--texte-3)}
#marqueurs .noeud-sortie mark{color:var(--texte);background:#e2b45c40;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#marqueurs .sortie-ref{margin-top:4px;font:12px/1.4 "IBM Plex Mono",monospace;color:var(--texte-3)}
#marqueurs .sortie-ref span{color:#e2b45c}

/* Apparition au défilement : le texte, puis la capture qui monte. */
#marqueurs .texte,#marqueurs .capture{opacity:0;transform:translateY(28px);transition:opacity .8s,transform 1s var(--ease)}
#marqueurs .capture{transition-delay:.12s}
#marqueurs .rangee.vue .texte,#marqueurs .rangee.vue .capture{opacity:1;transform:none}

@media (max-width:900px){
  #marqueurs.marqueurs{padding:12vh 5vw 10vh}
  #marqueurs .rangee,#marqueurs .rangee:nth-of-type(even){grid-template-columns:1fr;gap:28px;margin-top:88px}
  #marqueurs .rangee:nth-of-type(even) .texte{order:0}
  #marqueurs .capture,#marqueurs .rangee:nth-of-type(even) .capture{margin:0 -5vw 0 0}
  #marqueurs .rangee:nth-of-type(even) .fenetre{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  #marqueurs .lecture-barre span:first-child{display:none}
  #marqueurs .capture.flux{margin:0}
  #marqueurs .flux-toile{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"q q" "s m" "f f" "r r";gap:124px 12px;padding:28px 14px 168px}
  #marqueurs .noeud-legende{width:156px;margin-left:-78px}
  #marqueurs .noeud-trouve{white-space:normal}
  #marqueurs .noeud[data-noeud="question"] .noeud-legende,#marqueurs .noeud[data-noeud="retenu"] .noeud-legende{width:240px;margin-left:-120px}
  #marqueurs .lecture-corps{grid-template-columns:1fr}
  #marqueurs .lecture-feuille{padding:22px 18px;border-right:0;border-bottom:1px solid var(--filet)}
}
@media (prefers-reduced-motion:reduce){
  #marqueurs .texte,#marqueurs .capture,#marqueurs .passage,#marqueurs .noeud-trouve,#marqueurs .noeud-sortie{opacity:1;transform:none;transition:none}
  #marqueurs .flux-liens path.actif{animation:none}
}

/* Tableau Qualité et audit, reconstruit en HTML (données fictives : tableau-donnees.js, tableau.js).
   Petite fenêtre à onglets, à la hauteur des autres rangées. Noir neutre ; l'or marque ce qui est vérifié,
   comme dans l'application ; le reste en gris. Classes préfixées db-. */
#marqueurs .rangee .capture.tableau{margin-right:0}
#marqueurs .db{position:relative;--db-carte:#141414;--db-or:#e2b45c;border:1px solid var(--filet);border-radius:14px;background:#0f0f0f;overflow:hidden;
  box-shadow:0 1px 0 #ffffff14 inset,0 40px 80px -30px #000;font-size:12px}
#marqueurs .db h4{margin:0;font-size:12.5px;font-weight:600}
#marqueurs .db h5{margin:0 0 5px;font-size:11.5px;font-weight:500;color:var(--texte-3)}
#marqueurs .db button{font:inherit;color:inherit;cursor:pointer}
#marqueurs .db button:focus-visible,#marqueurs .db input:focus-visible{outline:2px solid var(--texte);outline-offset:2px}
#marqueurs .db-sous,#marqueurs .db-sens{margin:2px 0 0;font-size:11.5px;color:var(--texte-3)}

#marqueurs .db-barre{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--filet)}
#marqueurs .db-titre{font-size:13px;font-weight:600}
#marqueurs .db-periodes,#marqueurs .db-onglets,#marqueurs .db-filtres{display:flex;padding:2px;border:1px solid var(--filet);border-radius:8px;background:#0a0a0a}
#marqueurs .db-periodes button,#marqueurs .db-onglets button,#marqueurs .db-filtres button{padding:4px 9px;border:0;border-radius:6px;background:none;color:var(--texte-3);font-size:11.5px;white-space:nowrap}
#marqueurs .db [aria-pressed="true"],#marqueurs .db-onglets [aria-selected="true"]{background:#232323;color:var(--texte)}
#marqueurs .db-periodes button:hover,#marqueurs .db-onglets button:hover,#marqueurs .db-filtres button:hover{color:var(--texte)}

/* Indicateurs, toujours visibles */
#marqueurs .db-kpis{display:grid;grid-template-columns:repeat(4,1fr);margin:12px 14px 0;border:1px solid var(--filet);border-radius:9px;background:var(--db-carte)}
#marqueurs .db-kpi{min-width:0;padding:10px 12px}
#marqueurs .db-kpi+.db-kpi{border-left:1px solid var(--filet)}
#marqueurs .db-kpi p{margin:0;font-size:11.5px;color:var(--texte-2)}
#marqueurs .db-kpi b{display:block;margin:3px 0 2px;font-size:20px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#marqueurs .db-kpi small{display:block;overflow:hidden;font-size:11px;color:var(--texte-3);white-space:nowrap;text-overflow:ellipsis}

/* Onglets des vues */
#marqueurs .db-vues{display:flex;gap:18px;margin:10px 14px 0;border-bottom:1px solid var(--filet)}
#marqueurs .db-vues button{margin-bottom:-1px;padding:8px 0;border:0;border-bottom:1.5px solid transparent;background:none;color:var(--texte-3);font-size:12px}
#marqueurs .db-vues [aria-selected="true"]{border-bottom-color:var(--texte);color:var(--texte)}
#marqueurs .db-vues button:hover{color:var(--texte)}
#marqueurs .db-vue{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;height:318px;margin:10px 14px 14px}
#marqueurs .db-vue[hidden]{display:none}
#marqueurs .db-vue[data-panneau="controles"]{grid-template-columns:1fr 1fr}
#marqueurs .db-vue[data-panneau="journal"]{grid-template-columns:1fr}
#marqueurs .db-panneau{min-width:0;padding:12px 14px;border:1px solid var(--filet);border-radius:9px;background:var(--db-carte)}
#marqueurs .db-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}

/* Évolution de la qualité */
#marqueurs .db-panneau .db-onglets{display:inline-flex;margin-top:8px}
#marqueurs .db-graphe{display:grid;grid-template-columns:34px 1fr;margin-top:12px}
#marqueurs .db-echelle{display:flex;flex-direction:column;justify-content:space-between;height:140px;margin-top:-6px;font-size:10.5px;color:var(--texte-3)}
#marqueurs .db-courbe{position:relative;height:128px;background:linear-gradient(#ffffff0d 1px,transparent 1px) 0 0/100% 50%;border-bottom:1px solid #ffffff1a;cursor:crosshair}
#marqueurs .db-courbe svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#marqueurs .db-courbe path{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:d .6s var(--ease)}
#marqueurs .db-repere{position:absolute;top:0;bottom:0;width:1px;background:#ffffff40;opacity:0;pointer-events:none}
#marqueurs .db-bulle{position:absolute;top:4px;z-index:2;padding:7px 9px;border:1px solid var(--filet);border-radius:7px;background:#1c1c1c;font-size:11.5px;opacity:0;pointer-events:none;transform:translateX(10px)}
#marqueurs .db-bulle.gauche{transform:translateX(calc(-100% - 10px))}
#marqueurs .db-courbe.survol .db-repere,#marqueurs .db-courbe.survol .db-bulle{opacity:1}
#marqueurs .db-bulle p{margin:0;display:flex;align-items:center;gap:6px;line-height:1.65;white-space:nowrap}
#marqueurs .db-bulle p:first-child{color:var(--texte-3)}
#marqueurs .db-bulle b{margin-left:auto;padding-left:10px;font-weight:500;font-variant-numeric:tabular-nums}
#marqueurs .db-bulle i,#marqueurs .db-legende i{flex:none;width:9px;height:2px;border-radius:2px}
#marqueurs .db-axe{display:flex;justify-content:space-between;margin:6px 0 0 34px;font-size:10.5px;color:var(--texte-3)}
#marqueurs .db-legende{display:flex;flex-wrap:wrap;gap:4px 14px;margin:10px 0 0;padding:0;list-style:none;font-size:11.5px;color:var(--texte-2)}
#marqueurs .db-legende li{display:flex;align-items:center;gap:6px}
#marqueurs .db-legende b{font-weight:500;color:var(--texte);font-variant-numeric:tabular-nums}

/* Parcours de vérification : le ruban de l'application, en neutre, qui finit en or. */
#marqueurs .db-ruban{position:relative;margin-top:12px}
#marqueurs .db-etapes{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none;text-align:center}
#marqueurs .db-etapes span{display:block;height:30px;font-size:11px;line-height:1.3;color:var(--texte-2)}
#marqueurs .db-etapes b{display:block;margin-top:26px;font-size:19px;font-weight:500;font-variant-numeric:tabular-nums}
#marqueurs .db-etapes small{font-size:10.5px;color:var(--texte-2)}
#marqueurs .db-ruban svg{position:absolute;top:30px;left:0;width:100%;height:100px}
#marqueurs .db-ruban path{transition:d .7s var(--ease)}
#marqueurs .db-note{margin:52px 0 0;font-size:11.5px;line-height:1.5;color:var(--texte-3)}
#marqueurs .db-note b{display:block;margin-top:4px;font-weight:500;color:var(--texte-2)}

/* Contrôles et exceptions : deux anneaux (conic-gradient évidé), la valeur au centre. */
#marqueurs .db-anneaux{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
#marqueurs .db-anneau-bloc{position:relative;display:flex;flex-direction:column}
#marqueurs .db-anneau{width:78px;height:78px;margin:0 auto;border-radius:50%;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px))}
#marqueurs .db-centre{position:absolute;top:0;left:50%;display:grid;place-content:center;width:78px;height:78px;margin-left:-39px;text-align:center;pointer-events:none}
#marqueurs .db-centre b{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}
#marqueurs .db-centre small{font-size:10px;line-height:1.2;color:var(--texte-3)}
#marqueurs .db-points{margin:12px 0 0;padding:0;list-style:none;font-size:11px;line-height:1.35;color:var(--texte-2)}
#marqueurs .db-points li{display:flex;align-items:center;gap:6px;margin-top:5px;white-space:nowrap}
#marqueurs .db-points span{overflow:hidden;text-overflow:ellipsis}
#marqueurs .db-points i{flex:none;width:7px;height:7px;border-radius:50%}
#marqueurs .db-points b{margin-left:auto;padding-left:6px;font-weight:500;color:var(--texte);font-variant-numeric:tabular-nums}
#marqueurs .db .db-lien{margin-top:12px;padding:0;border:0;background:none;font-size:11.5px;color:var(--texte)}
#marqueurs .db .db-lien:hover{text-decoration:underline;text-underline-offset:3px}

/* Distribution des temps de réponse */
#marqueurs .db-histo{position:relative;display:flex;align-items:flex-end;gap:3px;height:150px;margin-top:40px;border-bottom:1px solid #ffffff1a}
#marqueurs .db-colonne-h{flex:1;display:flex;align-items:flex-end;height:100%}
#marqueurs .db-colonne-h div{width:100%;height:100%;border:1px solid #ffffff33;border-bottom:0;border-radius:3px 3px 0 0;background:#ffffff14;transform:scaleY(var(--f));transform-origin:bottom;transition:transform .6s var(--ease)}
#marqueurs .db-histo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#marqueurs .db-histo polyline{fill:none;stroke:#ededed;stroke-width:1.6;vector-effect:non-scaling-stroke}
#marqueurs .db-p{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed #ffffff4d}
#marqueurs .db-p span{position:absolute;bottom:100%;left:0;padding-bottom:4px;font-size:10.5px;font-style:normal;color:var(--texte-2);white-space:nowrap;transform:translateX(-50%)}
#marqueurs .db-axe-temps{margin-left:0}
/* Repères des centiles : P95 un cran plus haut, pour ne pas chevaucher P50 ni P99. */
#marqueurs .db-p:nth-of-type(2) span{bottom:calc(100% + 14px)}
#marqueurs .db-p:last-of-type span{transform:translateX(-30%)}

/* Journal d'audit */
#marqueurs .db-journal{min-width:0;border:1px solid var(--filet);border-radius:9px;background:var(--db-carte);overflow:hidden}
#marqueurs .db-journal-tete{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--filet)}
#marqueurs .db-journal-tete p{margin:0 auto 0 0;font-size:11.5px;color:var(--texte-3)}
#marqueurs .db-journal input{width:180px;padding:5px 9px;border:1px solid var(--filet);border-radius:7px;background:#0a0a0a;color:var(--texte);font:inherit;font-size:11.5px}
#marqueurs .db-lignes{height:246px;overflow:hidden}
#marqueurs .db-ligne{display:grid;grid-template-columns:minmax(0,1fr) 98px 54px 72px 44px;gap:10px;align-items:center;padding:7px 12px;border-top:1px solid #ffffff0d}
#marqueurs .db-ligne>span:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums;color:var(--texte-2)}
#marqueurs .db-entetes{border-top:0;font-size:11px;color:var(--texte-3)}
#marqueurs .db-entetes span{color:var(--texte-3)!important}
#marqueurs button.db-ligne{width:100%;border:0;border-top:1px solid #ffffff0d;background:none;text-align:left}
#marqueurs button.db-ligne:hover{background:#ffffff06}
#marqueurs .db-q b{display:block;overflow:hidden;font-weight:450;white-space:nowrap;text-overflow:ellipsis}
#marqueurs .db-q small{font:10.5px/1.4 "IBM Plex Mono",monospace;color:var(--texte-3)}
#marqueurs .db-statut{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;background:#ffffff12;font-size:11px;font-style:normal;white-space:nowrap}
#marqueurs .db-statut.verifie{background:#e2b45c26;color:var(--db-or)}
#marqueurs .db-statut svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#marqueurs .db-arrivee{animation:arrivee 1.6s var(--ease)}
@keyframes arrivee{from{background:#e2b45c1f;transform:translateY(-6px);opacity:0}30%{opacity:1;transform:none}to{background:transparent}}
#marqueurs .db-vide{margin:0;padding:18px 12px;color:var(--texte-3)}

/* Panneau de détail d'une requête : glisse depuis la droite, sur un voile, dans la fenêtre du tableau. */
#marqueurs .db-voile{position:absolute;inset:0;z-index:3;background:#0a0a0acc;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
#marqueurs .db-tiroir{position:absolute;top:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;width:min(420px,88%);border-left:1px solid var(--filet);
  background:#141414;box-shadow:-30px 0 60px -20px #000;transform:translateX(102%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s}
#marqueurs .db-tiroir-ouvert .db-voile{opacity:1;visibility:visible}
#marqueurs .db-tiroir-ouvert .db-tiroir{transform:none;visibility:visible}
#marqueurs .db-tiroir-tete{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-bottom:1px solid var(--filet)}
#marqueurs .db-tiroir-tete>div{flex:1;min-width:0}
#marqueurs .db-tiroir-titre{margin:0;font-size:12.5px;font-weight:600}
#marqueurs .db-tiroir-tete .db-sous{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#marqueurs .db .db-fermer{width:24px;height:24px;margin:-2px -4px 0 0;padding:0;border:0;border-radius:6px;background:none;color:var(--texte-3);font-size:17px;line-height:1}
#marqueurs .db .db-fermer:hover{background:#ffffff12;color:var(--texte)}
#marqueurs .db-tiroir-corps{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 14px;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent}
#marqueurs .db-tiroir-corps section{padding:12px 0;border-bottom:1px solid #ffffff0d}
#marqueurs .db-tiroir-corps h5{margin-bottom:8px;font:10.5px/1.4 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
#marqueurs .db-question{margin:0;font-size:13px;line-height:1.45}
#marqueurs .db-tiroir dl{margin:0}
#marqueurs .db-tiroir dl div{display:flex;justify-content:space-between;gap:14px;padding:3px 0;font-size:11.5px}
#marqueurs .db-tiroir dt{color:var(--texte-2)}
#marqueurs .db-tiroir dd{margin:0;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
#marqueurs .db-tiroir .ref{font-family:"IBM Plex Mono",monospace;color:var(--db-or)}
#marqueurs .db-affirmations{margin:8px 0 0;padding:0;list-style:none;font-size:11.5px;line-height:1.45}
#marqueurs .db-affirmations li{padding:6px 0;border-top:1px solid #ffffff0d;color:var(--texte-2)}
#marqueurs .db-affirmations b{font-weight:500;color:var(--texte)}
#marqueurs .db-affirmations .sans-preuve b{color:var(--db-or)}
#marqueurs .db-tiroir-pied{display:flex;justify-content:flex-end;gap:16px;padding:10px 14px;border-top:1px solid var(--filet)}
#marqueurs .db-tiroir-pied button{padding:4px 2px;border:0;background:none;font-size:12px;font-weight:500}
#marqueurs .db-tiroir-pied button:disabled{color:var(--texte-3);cursor:default}

@media (max-width:900px){
  #marqueurs .db-kpis{grid-template-columns:repeat(2,1fr)}
  #marqueurs .db-kpi:nth-child(3){border-left:0}
  #marqueurs .db-kpi:nth-child(n+3){border-top:1px solid var(--filet)}
  #marqueurs .db-vue,#marqueurs .db-vue[data-panneau="controles"]{grid-template-columns:1fr;height:auto}
  #marqueurs .db-journal input{display:none}
  #marqueurs .db-ligne{grid-template-columns:minmax(0,1fr) auto}
  #marqueurs .db-ligne>span:nth-child(n+3){display:none}
  #marqueurs .db-lignes{height:auto}
  #marqueurs .db-tiroir{width:100%}
  #marqueurs .db-axe span:nth-child(even){display:none}
}
@media (prefers-reduced-motion:reduce){
  #marqueurs .db-courbe path,#marqueurs .db-ruban path,#marqueurs .db-colonne-h div,#marqueurs .db-tiroir,#marqueurs .db-voile{transition:none}
  #marqueurs .db-arrivee{animation:none}
}